반응형

word-break:break-all 과  word-wrap:break-word 차이


word-wrap:break-word

 :  비아시아 언어를 제어. 의미없는 긴 문자열은 중간에 자르는 반면

   한 단어처럼 의미 있는 문자는 중간에 자르지 않는다.


word-break:break-all

 :  아시아 언어의 경우 normal 처럼 행동하며

   비아시사 언어의 경우 한 단어도 중간에 자른다.

   


word-wrap 속성

 : normal         - 기본값으로, 글자가 길어도 끊어지지 않고 한 중에 계속 표시

   break-word  - 강제로 끊어서 줄바꾼 한다.


word-break 속성

 :  normal - 기본값

    break-all - 문자를 강제로 줄바꿈 할 수 있다.

                    아시아 언어(CJK)에서 사용할 때는 normal 처럼 행동하며

                    비아시아언어에서는 임의대로 줄바꿈 할 수 있다.

    keep-all - 문자 쌍 사이에서 줄바꿈이 금지.

                   비 아시아 언어에 사용될 때는 normal처럼 행동함.

반응형
반응형

CSS3 word-break Property

Break words at an appropriate hyphenation point:




p.test {word-break:hyphenate;}


Syntax


word-break: normal|break-all|hyphenate;

Value Description
normal Breaks non-CJK scripts according to their own rules
break-all Lines may break between any two characters for non-CJK scripts
hyphenate Words may be broken at an appropriate hyphenation point



CSS white-space Property

Specify that the text in paragraphs will never wrap:


ex) http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space



p
{
white-space:nowrap;
}

Value Description
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap Sequences 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
pre Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
inherit Specifies that the value of the white-space property should be inherited from the parent element



반응형

+ Recent posts