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
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. |
<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>
CSS3 word-break property example 2: Use keep-all setting
<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>
CSS3 word-break property example 3. Use break-all setting
<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>
Post a Comment
0 Comments