Web/CSS/line-break

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 3The definition of 'line-break' in that specification.	Working Draft	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`line-break`	Chrome Full support 58 Full support 58 Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 14	Firefox Full support 69	IE Full support 5.5 Full support 5.5 Full support 8 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera Full support 45 Full support 45 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 11 Full support 11 Full support 3 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- No support 2 — 3 Prefixed' Prefixed' Implemented with the vendor prefix: -khtml-	WebView Android Full support 58 Full support 58 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 58 Full support 58 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android No support No	Opera Android Full support 43 Full support 43 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 11 Full support 11 Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 7.0 Full support 7.0 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-

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.

line-break by Mozilla Contributors is licensed under CC-BY-SA 2.5.