Detailed explanation and examples of the use of word-wrap attribute in CSS3

We all know that word-wrap Attribute is a new attribute of CSS3, so this article will explain in detail how to use the word-wrap attribute and the Notes, let’s look at a small example.

1. Define the

word-wrap attribute to allow long words or URL addresses to wrap to the next line.

2. Syntax and parameters

word-wrap: normal (default) |break-word normal: Allow content to break the specified container boundary if the word is too long , will go out of the boundary (displayed in the current line without wrapping). break-word: The content will wrap within the boundary. When the word cannot fit on the current line, it will automatically switch to the next line. If necessary, word-break will be triggered (note: please distinguish between word-break and break-word are two different things, one is an attribute and the other is a parameter). Note: All browsers can recognize it.

3. Description

word-wrap controls whether to "break the line for the word", and sets or retrieves whether to break the line when the current line exceeds the boundary of the specified container. There is no problem with Chinese, and there is no problem with English sentences. But for long strings of English, it doesn't work.

4. Example

congratulation This word belongs to a long string of English words. Word-wrap:break-word treats the entire word as a whole. If the end of the line is not wide enough to display the entire word, it will automatically Putting the whole word on the next line without truncating the word is why it doesn't work for long strings of text. word-wrap:normal is the default, and English words are not split.

5. Summary

The scope is only standard block-level elements such as div. Table elements such as th and td are recognized but have no effect (if td, th plus width word- Wrap can be effective under IE, but from the perspective of complete compatibility and convenient memory, the previous conclusion shall prevail).

# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to change the mouseover style without using CSS

Causes and solutions for HTML web page misalignment

Js process of operating DOM objects

The above is the detailed content of Detailed explanation and examples of the use of word-wrap attribute in CSS3. For more information, please follow other related articles on the PHP Chinese website!