[ CSS ] 공백이 포함된 문장 모두 줄바꿈하기

📍 공백이 포함된 문장 모두 줄바꿈하기

반응형을 고려하며 공백이 포함된 문장까지 브라우저의 너비가 줄어들면 해당 문장을 모두 줄바꿈해야하는 니즈가 생겼다. 그래서 줄바꿈 관련 CSS인 word-break와 white-space 그리고 overflow 등을 살펴보며 해답을 생각했지만 뾰족한 수가 나오지 않았다. 그래서 팀원들에게 현재 생긴 이슈를 공유하며 해결법을 찾고있는데, 공백을 뜻하는  와 word-break: keep-all 속성을 이용하면 해결할 수 있다는 팀원의 말을 듣고 작성해보니 해결됐다.

 

추가로  란, Non-breaking Space의 약어인데, 단어 뜻 그대로 공백을 의미한다. 특수기호가 붙은 이유는 일반적인 문자과 구분하기 위해서다. 외관상으로 공백이 있는것처럼 보이지만, 이 위치에서 줄바꿈이 될 수 없다는 뜻이다.

 

여담으로, React Component에서  를 작성하면 가끔 문자 그대로 출력되는 경우가 있는데, 이럴 때는 HTML코드인  를 넣는게 아니라, 유니코드 문자인 \u00A0을 넣으면 된다.

 

See the Pen &nbsp + keep-all by an (@YWTechIT) on CodePen.

728x90

See the Pen &nbsp + keep-all React by an (@YWTechIT) on CodePen.

 

Reference

1. wiki - nbsp
2. https://www.compart.com/en/unicode/U+00A0