div에 글을 써넣으면 '\n'이 먹히지 않는다. 그리고 같은 글자가 반복되어서 나오면("+++++++++..." 같은것)
div영역을 뚫고 나가버린다. 이를 해결하기 위해서 CSS의 white-space와 word-break를 써야한다.
white-space
줄바꿈 해주는 property로 normal, nowrap, pre, pre-line, pre-wrap이 있다.
normal은 보통의 경우로 옵션을 주지 않아도 된다.
nowrap은 줄바꿈을 하지 않는다.(div를 뚫고 나간다.)
pre는 html의 <pre>태그처럼 내부의 태그를 실행시켜주지만 이역시 줄바꿈은 하지 않는다.
pre-line은 normal + pre. 줄바꿈도 해주고 태그도 실행한다.
pre-wrap는 pre-line과 비슷 하지만 pre-line은 연속되는 공간(" ")을 한칸으로 압축하지만
pre-wrap는 압축하지 않고 그대로 보여준다.
word-break
한단어가 길게 이어질때 자동으로 잘라주는 property이다.
normal은 자르지 않는다.
break-all은 영역을 넘어가면 무조건 자른다.
hyphenate는 영역을 넘어가더라도 단어를 유지해준다.
keep-all은 한글일 경우 띄어쓰기 기준으로 자른다.(only IE)
현재 word-break는 5대 브라우저중 FF와 Opera만 지원하지 않는다.
word-wrap
normal은 자르지 않는다.
break-word는 단어단위로 자른다.
(CSS3를 지원하는) 모든 브라우저에서 단어별로 줄바꿈하고 반복되는 단어를 자르려면(한글 제외)
옵션을 추가하면 된다.
출처1:
[CSS] 텍스트 줄바꿈 처리 word-break, white-space
출처2:
pre-line과 pre-wrap 차이
출처3:
word-break와 word-wrap