css 텍스트 줄바꿈 처리

css 텍스트 줄바꿈 처리

width가 정해져있는 div안에 텍스트를 넣을 경우, 텍스트의 길이가 길어져 div 영역을 넘쳐 텍스트가 출력되는 현상을 많이 보셨을 겁니다.

길어진 텍스트에 대해서 개행되어 텍스트가 내려가는 경우도 보셨을 테구요..

그렇다면 이것의 기준은 무엇일까요

정답은 바로 단어 단위로 개행을 한다 입니다.

아래의 예는 width 200px, height 300px 짜리의 div 안에 text를 넣어본 그림입니다.

어떠한 부분에서는 div 영역을 넘쳐 텍스트가 입력되고, 어떠한 부분에서는 개행이 되고 있습니다.

div 내 텍스트 개행의 기준은 바로 단어 단위이기 때문에 위와 같은 현상이 발생합니다.

제가 입력한 텍스트는 아래와 같습니다.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

여기서 공백을 기준으로 한 단어로 인식하였기 때문에 개행이 발생한 것입니다.

띄워쓰기를 입력하지 않았다면 div 영역을 넘쳐 쭉 이어져 갔겠지요.

그렇다면 이를 div 영역에 맞추어 자동으로 개행되는 방법은 없을까요?

있습니다. 바로 word-break:break-all 라는 css를 추가해주시면 됩니다.

크롬 개발자 도구로 element.style에 word-break:break-all을 추가하니 div 영역 크기에 맞추어 자동으로 개행됨을 볼 수 있습니다.

그리고 위 역할의 반대로 개행이 되지 않게 하는 방법도 있습니다.

바로 white-space:nowrap css 입니다.

보다시피 띄워쓰기로 인해 하나의 단어로 인식함에도 불구하고, 개행이 되지 않고 있습니다.

잘 활용합시다!