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>

HTML lang= "Zh-en">

Head>

Title>CSS Line wrapping </title>

Meta http-equiv= "contentContent=" text/html; Charset=utf-8 ">

Style type= "Text/css">

   8:                padding: 0;

  Ten:                width200px;

  :                border1px solid red;

  :    </style>

Head>

Body>

div>

  :   </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>

   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