The word-break attribute is used to specify line breaking rules for non-CJK (Chinese, Japanese, and Korean) scripts, and specifies the processing method for automatic line wrapping. By using the word-break attribute, you can let the browser break a line at any position.
CSS3 word-break attribute
Function:word-break attribute Specifies how to handle automatic line wrapping.
Tips: By using the word-break attribute, you can allow the browser to break a line at any position.
Syntax:
word-break: normal|break-all|keep-all;
normal: Use the browser’s default line wrapping rules.
break-all: Allow line breaks within words.
keep-all: Line breaks can only be made at half-width spaces or hyphens.
Note: All major browsers support the word-break attribute. But Opera does not support the word-break attribute.
CSS3 Example of using the word-break attribute
<!DOCTYPE html>
<html>
<head>
<style>
p.test1
{
width:11em;
border:1px solid #000000;
word-break:keep-all;
}
p.test2
{
width:11em;
border:1px solid #000000;
word-break:break-all;
}
p.test3
{
width:11em;
border:1px solid #000000;
word-break:keep-all;
}
p.test4
{
width:11em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test3">This paragraph contains some text: The lines will break at any character.</p>
<p class="test4">This paragraph contains some text: The lines will break at any character.</p>
</body>
</html>Rendering:
Reference for this article: https://www.html.cn/book/css/properties/text/word-break.htm
The above is the detailed content of How to use word-break attribute. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
