CSS line-break Property
Description
The line-break property controls the rules the user agent uses when deciding where to break lines within inline content. It is particularly important for scripts and languages that do not use spaces between words (for example, many East Asian scripts), because it influences whether the browser may break between punctuation, characters, or symbol groups. At a conceptual level it tells the renderer how permissive or strict to be when inserting line breaks so the layout maintains readable and typographically sensible line endings.
Because line breaking is just one part of text layout, authors typically use it in combination with other properties that affect word wrapping, whitespace handling and spacing. For controlling how words themselves may be split, consider word-break. To influence whether long words wrap or cause overflow, check overflow-wrap. The treatment of explicit whitespace and collapsing behavior is governed by white-space, and vertical rhythm and perceived density of lines can change how breaks feel when you adjust line-height. Together these properties let you tune both the mechanical breaking rules and the visual result.
In practical use, authors employ line-break to improve readability in multilingual layouts, to avoid awkward orphaned punctuation at line starts or ends, and to make automatic wrapping behave closer to typographic norms for the script in question. It’s also useful when dealing with UI components with constrained widths (buttons, tags, cards) where predictable breaking prevents layout overflow or visual glitches. When refining behavior further, pairing it with hyphenation controls such as hyphens or with language-specific markup can produce much better results than relying on default, language-agnostic break rules.
Definition
- Initial value
- auto
- Applies to
- All elements
- Inherited
- Yes
- Computed value
- Specified value
- Animatable
- No
- JavaScript syntax
- object.style.lineBreak
Interactive Demo
この喫茶店は、いつでもコーヒーの香りを漂わせています。
彼女はこの喫茶店で働いて、着々と実力をつけていきました。
今では知る人ぞ知る、名人です。
Syntax
line-break: auto | loose | normal | strict
Values
- autoThe browser determines the set of line-breaking restrictions to use, and it may vary the restrictions based on the length of the line; e.g., use a less restrictive set of line-break rules for short lines.
- looseBreaks text using the least restrictive set of line-breaking rules. Typically used for short lines, such as in newspapers.
- normalBreaks text using the most common set of line-breaking rules.
- strictBreaks text using the most stringent set of line-breaking rules.
Example
Browser Support
The following information will show you the current browser support for the CSS line-break property. Hover over a browser icon to see the version that first introduced support for this CSS property.
Desktop
Tablets & Mobile
