반응형에서 텍스트 줄바꿈

단순히 텍스트를 줄 바꿈 하는것은 <br> 태그로만 알고 있었다. 그런데 반응형으로 하려니 막힌다

모바일 버전에서는 줄이 바뀌고 테블릿 버전부터는 한줄로 텍스트를 표시하고 싶었다 

 

<p class="testimonial__title">
    Client 
        <span class="second_line_testimonial_title">
        Testimonial
        </span>
</p>

위와 같이 줄바꿈하고 싶은 텍스트는 span태그 안에 작성하면 된다 

 

  .second_line_testimonial_title {
    @include mq($BREAKPOINT-XS) {
      display: block;
    }
    @include mq($BREAKPOINT-MD) {
      display: inline;
    }
  }

 

위와 같이 CSS를 작성해주면 모바일 버전에서만 줄바꿈이 적용된다 

 

 

모바일 버전에서 보이는 텍스트

 

커지면 줄바꿈이 사라짐