The use of Word-wrap attribute in CSS3 and examples

As we all know, the Word-wrap property is the new property of CSS3, then this article will give you a detailed explanation of how to use the Word-wrap property, as well as the precautions to use, see a small column below.

1. Definition

The Word-wrap property allows long words or URL addresses to wrap to the next line.

2. Syntax and parameters

Word-wrap:normal (default) |break-word Normal: Allows the content to be opened to the specified container boundary, and if the word is too long, it will be dashed out of the boundary (displayed in the current row, not wrapped). Break-word: Content will wrap within the boundary, and when the word does not fit in the current line, it will automatically switch to the next line, triggering word-break if necessary (note: Please distinguish between Word-break and Break-word are different things, one for the attribute parameter). Note: Each browser can be recognized.

3. Description

Word-wrap is the control of whether the line is broken or not, and whether to break a career change when the current row exceeds the bounds of the specified container. There is no problem in Chinese, and the English sentence is fine. But for long strings of English, it doesn't work.

4. Example

Congratulation this word belongs to a long string of English, Word-wrap:break-word the whole word as a whole, if the line end width is not enough to display the whole word, it will automatically put the whole word to the next line, not the word truncation, This is the explanation for the long string of words that do not work. Word-wrap:normal is the default, English words are not opened.

5. Summary

The scope of the function is only a div, such as standard block-level elements, th,td such table elements, although recognized but no effect (if the td,th plus width word-wrap in IE is able to play an effect, but according to the full compatibility of the convenient memory point of view or the previous conclusions prevail).

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

How to change the mouse hover style without using CSS

HTML page dislocation reason and solution

JS manipulating the flow of Dom objects