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. |
Candidate Recommendation | Initial definition |
Browser compatibility
BCD tables only load in the browser