css 자동줄바꿈

html 코딩을 하다 보면

text가  width 를 넘어설 경우 css를 이용하여 자동 줄바꿈을 할 수 없을까 라는 고민 대부분 있을겁니다.

항상 구글링에 css 자동줄바꿈 검색해서 사용하곤 했는데

홈페이지 작업하면서 궁금했고 자주 찾았던 내용을 블로그에 남기기로 했습니다.

 

첫번째 자동 줄바꿈 

keep-break 

keep-break 는 기본적으로 줄이 넘어갈 때는 단어 단위로 자릅니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 keep-break 를 사용해주면 줄바꿈이 가능하게 됩니다.

 

See the Pen Untitled by 박상언 (@zsrcvkwa-the-animator) on CodePen.

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

위에서 보면 class가 적용된 내용과 적용되지 않는 내용이 있는데

적용안된 문구를 보면 단어가 끊김없이 죽 이어져서 나옵니다.

 

그리고 class 즉 style "word-break:keep-all" 이 적용된 문구를 보면

단어 단위로 끊어져 자동 줄바꿈이 된것을 볼 수 있습니다.

 

매번 구글링 귀찮어서 블로그에 두고두고 보려고 ..