line-break

Avatar of Geoff Graham
Geoff Graham on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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.

Situationnormalloosestrict
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 JapaneseAllowed, 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 AmbiguousFullwidth, or Wide.
Breaks after prefixes:
Characters with the Unicode line breaking class PR and the East Asian Width property AmbiguousFullwidth, or Wide.
IEEdgeFirefoxChromeSafariOpera
6+14+69+AllAll15+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
85+No81+All59+
Source: caniuse