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

Source: Internet
Author: User
Tags truncated

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  >   

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

 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.