CSS3 word-break property

 The CSS3 word-break property can set the circumstances under which the browser should break the string. The common settings are mainly divided into two types, namely, keeping the word intact when breaking the line and breaking the line directly regardless of whether the word is complete or not. CSS3 The word-break attribute is a very useful function of the new generation of web content layout. In the past, because you could not set the line break by yourself, it was equivalent to leaving the visual effect of the content text breaking to the browser to decide, often causing the position of an article to break. Different browsers have different performances. The CSS3 word-break attribute allows designers to decide how to break the text of the article first. At least, it can improve the consistency of the article layout in each browser.

CSS3 word-break property syntax

word-break: text line break effect;

The common word-break attribute text line breaking effects are divided into three types, namely normal, break-all, keep-all, organized as follows:

CSS3 word-break possible values

Set value	Description
normal	The default value is based on the line breaking effect preset by the browser.
keep-all	It is not allowed to wrap the letters of a single word, and the entire word must be preserved. For example, a half-space can be used to wrap.
break-all	You can wrap the letters of a word, and you don’t have to complete the word to wrap.
initial	Set the word-break attribute to the default value.
inherit	The word-break attribute setting inherited from the parent layer.

CSS3 word-break property example 1. Use normal setting

<meta charset="utf-8">
<style>
#DIV1{
    width:370px;
    height:50px;
    border:1px gray solid;
    word-break:normal;
}
</style>
<div id="DIV1">
This Is a line of word-break attribute test text, this is a line of word-break attribute test text
</div>

Example output effect

This is a line of word-break attribute test text, this is a line of word-break attribute test text

The text line breaking effect used in Example 1 is normal, so the actual effect you see may be different, because the effect of normal is equivalent to handing the line breaking rules to the browser to execute. The default of each browser The line breaking methods are not necessarily the same, and the English words are usually kept intact.

CSS3 word-break property example 2: Use keep-all setting

<meta charset="utf-8">
<style>
#DIV2{
    width:370px;
    height:50px;
    border:1px gray solid;
    word-break:keep-all;
}
</style>
<div id="DIV2" >
This is a line of word-break attribute test text, this is a line of word-break attribute test text
</div>

Example output effect

This is a line of word-break attribute test text, this is a line of word-break attribute test text

The second example uses the keep-all effect of the word-break attribute to keep the English words intact. This is also the default value of most browsers. From the output effect of the example, you can see that the English word-break is not affected. Cut off, but when the word begins, it is directly on the second line, and there will be an extra blank on the right side of the first line.

CSS3 word-break property example 3. Use break-all setting

<meta charset="utf-8">
<style>
#DIV3{
    width:370px;
    height:50px;
    border:1px gray solid;
    word-break:break-all;
}
</style>
<div id="DIV3" >
This is a line of word-break attribute test text, this is a line of word-break attribute test text
</div>

Example output effect

This is a line of word-break attribute test text, this is a line of word-break attribute test text

Example 3 can be said to be the essence of the CSS3 word-break property, because the effect of break-all will cause the word to be cut off directly at the end of the section regardless of whether it is complete or not, so the right side of the first line is filled, and the English word is also Cut into two lines. Normal browsers do not preset this effect, so web designers can set it by themselves. Because of this feature, it is said that the word-break property of CSS3 is a new tool for web page layout, which is quite It is simple and easy to use and can make the layout look more tidy. The disadvantage is that some people may not understand the cut off English words, so it is best to read the target group according to the target group after the webpage is launched. Ability, and then decide which word-break setting method to use.