CSS wrapping: Word-wrap, Word-break, and text-wrap differences

Word-wrap: Allows splitting of long, indivisible words and wrapping to the next line. (same effect in English and Chinese)

Word-wrap has two values:

1. Word-wrap:normal: line breaks only allowed hyphenation points (the browser keeps the default processing).

2, Word-wrap:break-word: In the long word or URL address inside to wrap. ( that is, a long word at the end of the container cannot be fully displayed, not truncated, but as a whole, word wrapping )

 1:   < ! Doctype>   

 2:   <  html  lang=" Zh-en " Span style= "COLOR: #006080" >>   

 3:   <  head  >   

 4:   <  title  >  css wrap < /title  >   

 5:   <  meta  http-equiv=" Span style= "COLOR: #0000ff" >content -type "content  =" Text/html;  Charset=utf-8 ">   

 6:   <  style  type=" Text/css " >   

 7:   div  { 

 8:   padding : 0;  

 9:   margin : 0 auto;  

 ten:   width : 200px;  

 one:   height : 100px;  

 n:   border : 1px solid Red;  

:  }  

 +:   < /style  >   

:   < /head  >   

 +:   <  body  >   

:   <  div  >   

:   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

:   < /div  >   

:   < /body  >   

  :</HTML>

By default:

To add a style:

   1:  Word-wrap:break-word; The effect is the same as above

Second, Word-break: provisions of non-Chinese and Japanese Korean text of the line-wrapping rules. (for Chinese normal line, the English according to the following instructions to deal with)

Word-break has three values:

1. Word-break:normal: Use browser default line-wrapping rules. ( equivalent to Word-wrap:normal)

2. Word-break:break-all: Allow line wrapping within the word. ( that is, a long word at the end of the container cannot be fully displayed, it truncates the word )

Add this rule to div

   1:  word-break:break-all; 

Effect: The sit is truncated

3, Word-break:keep-all: can only be wrapped in half-width spaces or hyphens at the line.

To demonstrate, add a hyphen (-) between the Ipsum, dolor, and sit in the original text

   1:<Div>

 2:   Lorem ipsum-dolor-sit amet, consectetur adipiscing elit. 

   3:   </div>

Effect: After Ipsum, a newline is generated

Third, Text-wrap: rules for the line of text.

Text-wrap is the CSS3 property and has 4 values:

1. Text-wrap:normal: Line wrapping is only allowed at the line break point.

2, Text-wrap:none: Do not change line. Text that cannot be accommodated by an element overflows.

3. Text-wrap:suppress: Wraps in the compressed element. The browser wraps only when there are no other valid break points in the row.

4, text-wrap:unrestricted: In any of the two characters between the line.

PS: The Text-wrap property is not supported by mainstream browsers at this time.

Source: http://www.ido321.com/621.html

CSS Wrapping: Word-wrap, Word-break, and text-wrap differences