word-break
CSS word-break Property
The word-break property specifies where the lines should be broken.
Normally, line breaks only occur in certain spaces when there is a space or a hyphen. But when the word-break property is set to the break-all value, the browser will break lines at any point.
This property is one of the CSS3 properties.
| 类目 | 类目 |
|---|---|
| Initial Value | normal |
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.wordBreak = “break-all”; |
Syntax
Syntax
word-break: normal | break-all | keep-all | break-word | initial | inherit;
Example of the word-break property:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
html,
body {
height: 100%;
}
body {
font-family: Helvetica, san serif;
display: flex;
justify-content: center;
align-items: center;
background-color: #8ebf42;
}
p {
word-break: break-all;
line-height: 1;
text-transform: uppercase;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #eee;
width: 1em;
}
</style>
</head>
<body>
<p>element</p>
</body>
</html>
Result
In the following example the words break in the text.
Example of the word-break property with the “break-all” value:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
font-size: 0.95em;
line-height: 1.5;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
margin: 50px auto;
max-width: 700px;
}
.text {
padding: 20px;
background-color: #666;
color: white;
text-align: justify;
}
.break {
word-break: break-all;
}
strong {
background-color: #000;
}
</style>
</head>
<body>
<h2>Word-break property example</h2>
<div class="container">
<h3>Text breaks inside words</h3>
<p class="text break">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem <strong>Ipsum</strong> has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <strong>remaining</strong> essentially unchanged.
</p>
</div>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| normal | Uses line break rules. This is the default value of this property. |
| break-all | This value creates a break at the exact place where the text will otherwise overflow the container. It breaks the word at any character and as a result it will be difficult to read. |
| keep-all | Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal. |
| break-word | This value creates a break at the exact place where the text will otherwise overflow the container. It breaks the word at any character and as a result it will be difficult to read. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |