line-break | CSS-Tricks

CSS Almanac → Properties → L → line-break

Geoff Graham on Nov 6, 2020 (Updated on Jul 18, 2022)

The CSS line-break property defines how strictly to enforce rules for wrapping text wrapping on new lines, particularly when working with symbols and punctuations in Chinese, Japanese or Korean (CJK) writing systems. It is included in the CSS Text Module Level 3 specification, which is currently in Editor’s Draft.

.element {
  line-break: strict;
}

Demo

Syntax

line-break: auto | loose | normal | strict | anywhere;

Initial: auto
Applies to: all elements
Inherited: yes
Computed value: as specified
Animation type: discrete

Values

/* 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;

auto: This lets the browser decide how it implements line breaks. Each browser may differ on its criteria based on factors, including line length.
loose: This is the lightest enforcement of line breaking rules. The spec cites short lines of text, like ones we might see in a newspaper, as an example where this value might be used.
normal: This breaks lines of text based on the “most common” set of rules. (Note that there is no definition provided about what the most common set of rules is or what it might contain.)
strict: This enforces the strictest set of rules for line breaks.
anywhere: This value enables soft wrap opportunities, which allow text to break at spaces or punctuation instead of the word boundary alone. It’s ideal for languages that might not use spaces or punctuation to separate words. The spec says that CSS does not define soft wrap opportunities, and this value recognizes and leverages them to apply line breaking rules. The spec describes the text wrapping behavior like what we typically see in a terminal.

The spec also notes that the anywhere value allows preserved white spaces at the end of a line to wrap to the next line when used with the white-space property set to break-spaces.

Value behavior across different languages

As you might imagine, different languages have different preferences when it comes to how text is broken onto new lines. There is no standardized convention used by all languages. That leaves it up to browsers to figure out and follow the “correct” rules for a particular language. But the specification does outline several requirements for determining whether line breaking is allowed at the different levels of line-break strictness in certain situations. We’ll present those here.

Situation	`normal`	`loose`	`strict`
Breaks before Japanese small kana or the Katakana-Hiragana prolonged sound mark, i.e. character from the Unicode line breaking class `CJ`	❌	✅	✅
Breaks before certain CJK hyphen-like characters: 〜 U+301C, ゠ U+30A0	❌	✅ if the writing system is Chinese or Japanese	Allowed, if the writing system is Chinese or Japanese
Breaks before certain CJK hyphen-like characters: 〜 U+301C, ゠ U+30A0	❌	✅ if the preceding character belongs to the Unicode line breaking class `ID` (including when the preceding character is treated as `ID` due to `word-break: break-all)`	❌
Breaks before iteration marks: 々 U+3005, 〻 U+303B, ゝ U+309D, ゞ U+309E, ヽ U+30FD, ヾ U+30FE	❌	✅	❌
Breaks between inseparable characters (such as ‥ U+2025, … U+2026) i.e. characters from the Unicode line breaking class `IN`	❌	✅	❌
Breaks before certain centered punctuation marks: ・ U+30FB, ： U+FF1A, ； U+FF1B, ･ U+FF65, ‼ U+203C, ⁇ U+2047, ⁈ U+2048, ⁉ U+2049, ！ U+FF01, ？ U+FF1F	❌	✅	❌
Breaks before suffixes: Characters with the Unicode line breaking class `PO` and the East Asian Width property `Ambiguous`, `Fullwidth`, or `Wide`.	❌	✅	❌
Breaks after prefixes: Characters with the Unicode line breaking class `PR` and the East Asian Width property `Ambiguous`, `Fullwidth`, or `Wide`.	❌	✅	❌