자동줄바꿈 : 긴 텍스트 줄 바꿈 안될 때 (word-break:break-all;)

 

 

 

퍼블리싱을 하다 보면 텍스트가 정해진 가로 값 영역을 넘어가는 경우 어떤 기준으로 줄바꿈 해줘야 할지 설정을 해줘야 합니다.

단어별로 다음 줄로 넘겨준다든지, 단어에 상관없이 무조건 다음 줄로 넘겨준다든지...

이럴 때 필요한 css 를 알아보도록 하겠습니다.

​

 

 

※ word-break

.text {word-break:break-all;}

 

word-break 에서 느껴지실 텐데 말 그대로 다 잘라준다고 생각하시면 됩니다.

줄바꿈 처리를 하지 않으면 기본적으로 단어 위주로 다음 줄로 줄바꿈이 이뤄질 것입니다.

​

 

근데 여기서 문제가 띄어쓰기를 하지 않고 글을 썼을 경우에 모든 글을 한 단어로 생각해서 글을 쓰는 영역의 가로 값을 넘어가도 뚫고 작성이 된다는 것입니다.

​

 

이때 word-break을 사용하시면 단어가 길어서 일정 영역을 넘어가도 텍스트가 하나씩 부서져서 자동으로 줄바꿈이 진행됩니다.