The line-break
CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.
/* Keyword values */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: anywhere; /* Global values */ line-break: inherit; line-break: initial; line-break: unset;
Syntax
Values
auto
- Break text using the default line break rule.
loose
- Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.
normal
- Break text using the most common line break rule.
strict
- Break text using the most stringent line break rule.
anywhere
-
There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the
word-break
property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.
Formal definition
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
auto | loose | normal | strict | anywhere
Examples
Setting text wrapping
See whether the text is wrapped before "ã ", "ã" and "ã".
HTML
<div lang="ja"> <p class="wrapbox auto">auto:<br>ããã¯æšãŽãģã¨ãã§æ¨ã ãčŧããĻããã<br>ããŽæ¯č˛ãĢãįžãããĒãã¨æããã¤ãļãããã</p> <p class="wrapbox loose">loose:<br>ããã¯æšãŽãģã¨ãã§æ¨ã ãčŧããĻããã<br>ããŽæ¯č˛ãĢãįžãããĒãã¨æããã¤ãļãããã</p> <p class="wrapbox normal">normal:<br>ããã¯æšãŽãģã¨ãã§æ¨ã ãčŧããĻããã<br>ããŽæ¯č˛ãĢãįžãããĒãã¨æããã¤ãļãããã</p> <p class="wrapbox strict">strict:<br>ããã¯æšãŽãģã¨ãã§æ¨ã ãčŧããĻããã<br>ããŽæ¯č˛ãĢãįžãããĒãã¨æããã¤ãļãããã</p> <p class="wrapbox anywhere">anywhere:<br>ããã¯æšãŽãģã¨ãã§æ¨ã ãčŧããĻããã<br>ããŽæ¯č˛ãĢãįžãããĒãã¨æããã¤ãļãããã</p> </div>
CSS
.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; } .auto { line-break: auto; } .loose { line-break: loose; } .normal { line-break: normal; } .strict { line-break: strict; } .anywhere { line-break: anywhere; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3 The definition of 'line-break' in that specification. |
Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
line-break | Chrome
Full support
58
| Edge Full support 14 | Firefox Full support 69 | IE
Full support
5.5
| Opera
Full support
45
| Safari
Full support
3
| WebView Android
Full support
58
| Chrome Android
Full support
58
| Firefox Android No support No | Opera Android
Full support
43
| Safari iOS
Full support
1
| Samsung Internet Android
Full support
7.0
|
Legend
- Full support
- Full support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.