The line-break property specifies how to break lines of Chinese, Japanese, or Korean text working with punctuation and symbols. But, these languages have different rules. This line break might not occur. For example, if the value is set to “strict”, break before hyphens are not allowed in Chinese and Japanese languages.
The CSS specification emphasizes rules only for Chinese, Japanese and Korean.
For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera are used with this property.
| Initial Value | auto |
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.lineBreak = “loose”; |
Syntax
line-break: auto | loose | normal | strict | initial | inherit;Example of the line-break property:
<!DOCTYPE html>
<html>
<head>
<style>
.korean {
line-break: strict;
}
</style>
</head>
<body>
<h2>Line-break property example</h2>
<!--Be the change you want to see in the world.-->
<span class="korean">세상에서 보고싶은 변화가 있다면 당신 스스로 그 변화가 되어라.</span>
</body>
</html>Result
Example of the line-break property with the “normal” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 16px;
line-height: 24px;
line-break: normal;
}
</style>
</head>
<body>
<h2>Line-break property example</h2>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>Values
| Value | Description |
|---|---|
| auto | Breaks the text using the default line break rule. This is the default value of this property. |
| normal | Breaks the text using the least restrictive line break rule: such as in newspapers. |
| loose | Breaks the text using the most common line break rule. |
| strict | Breaks the text using the most stringent line break rule. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |