쓸때마다 헷갈리는 word-break, word-wrap, white-space

word-break Property


ValueDescription
normalDefault value. Break words according to their usual rules
break-allLines may break between any two letters
keep-all Breaks are prohibited between pairs of letters
initialSets this property to its default value. Read about initial
inheritInherits this property from its parent element. Read about inherit


word-break : break-all

-> width를 넘어서면 단어 잘라서 줄바꿈


word-wrap Property


ValueDescription
normalBreak words only at allowed break points
break-wordAllows unbreakable words to be broken
initialSets this property to its default value. Read about initial
inheritInherits this property from its parent element. Read about inherit


break-word 줄바꿈

word-wrap 속성은 비아시아 언어 줄바꿈 제어,

중국, 일본, 한국어는 word-break 속성 이용.


white-space Property



ValueDescriptionPlay it
normal

Sequences of whitespace will collapse into a single whitespace.
Text will wrap when necessary.
This is default

Play it »
nowrapSequences of whitespace will collapse into a single whitespace.
Text will never wrap to the next line.

The text continues on the same line until a <br> tag is encountered
Play it »
pre

Whitespace is preserved by the browser. Text will only wrap on line breaks.
Acts like the <pre> tag
in HTML

Play it »
pre-line

Sequences of whitespace will collapse into a single whitespace.
Text will wrap
when necessary, and on line breaks

Play it »
pre-wrapWhitespace is preserved by the browser. Text will wrap when necessary,
and on line breaks
Play it »
initialSets this property to its default value. Read about initialPlay it »
inheritInherits this property from its parent element. Read about inherit



white-space : 

nowrap 줄바꿈 안됨.

nowrap 엔터 친 곳만 줄바꿈.

pre-line 엔터 + width 넘어가면 줄바꿈

pre-wrap 위와 비슷한 기능. (차이점 모르겠음)



출처 : http://www.w3schools.com/