[팀] 겸상 - CSS의 white-space를 이용한 공백과 텍스트 줄 바꿈 처리

 

[그림 1] 텍스트 줄 바꿈이 되지 않고 있다.

 

[그림 1]과 같이 텍스트 줄 바꿈이 되지 않아서 이것저것 만져보다가 원인을 찾았다. 원인은 CSS에서 공백과 줄 바꿈을 지정하는 white-space의 속성 값이 nowrap로 지정되어 있었기 때문이다. white-space의 속성 값을 normal로 변경하여 [그림 2]와 같이 보이도록 할 수 있었다. 자동 줄 바꿈이 되지 않도록 하는 nowrap은 성가셨지만 오른쪽의 "숟갈 아이콘"과 "숫자"가 줄 바꿈 되지 않도록 할 때는 유용했다.

 

[그림 2] 텍스트 줄 바꿈 처리가 되었다.

 

참고한 내용은 다음과 같다.

https://www.tabmode.com/homepage/white-space.html

初心者のためのHTMLとエクセル講座：HTML・CSSを使ったホームページ作成やエクセル(EXCEL)・フォ