CSS 로 <br> 을 모바일(웹)에서만 보여주고

PC(웹)에서는 보여주지 않는 방법.

 

 

1. css 에 mobile_inline 클래스를 아래와 같이 추가.

.mobile_inline { display: none }

/* 모바일 CSS  */

@media all and (max-width:640px) {

.mobile_inline { display: inline-block }

}

 

​

2. 아래와 같이 br 에 mobile_inline 클래스를 추가.

<br class="mobile_inline">

하단의 코드 추천
 

텍스트1<span class="pc_br"></span>텍스트2
텍스트1<span class="mo_br"></span>텍스트2
 텍스트1<span class="pc_br"></span><span class="mo_br"></span>텍스트2

.pc_br,
.mo_br {
    display: none;
}

/* PC에서만 줄바꿈 */
@media all and (min-width: 641px) {
    .pc_br::after {
        content: "";
        display: block;
    }
}

/* 모바일에서만 줄바꿈 */
@media all and (max-width: 640px) {
    .mo_br::after {
        content: "";
        display: block;
    }
}