CSS | br 줄바꿈 기능 없애기

반응형을 제작하다 보면 pc에서는 줄바꿈을 넣어서 표시하고 모바일에서는 줄바꿈 적용을 하지 않는 경우가 있는데 그럴 때마다 br태그를 강제로 없애는 방법을 썼었다.

@media only screen and (max-width: 767px) {

    br{
       display:none !important;
    }

}

하지만,,
이렇게 important를 사용함으로써 강제성이 부여되고 유지보수가 힘들뿐 아니라
문단에 여백이 제멋대로 나와 보기 불편할 수 있다.

그래서 찾아낸 방법은

@media only screen and (max-width: 767px) {

    br{
       display: inline-block;
       content: " ";
       padding: 0 2px;
    }

}

마침표 뒤 다음 문장이 시작될 때 약간의 띄어쓰기가 들어가고
br태그가 줄바꿈기능을 잃게 된다.