Widely availableSupported across all major browsers. Safe to use in production.
Typography Widely available

line-break

The line-break CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.

Typography

Overview

The line-break CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
line-break
58
14
69
11
58
11
anywhere
83
83
69
13
83
13
auto
25
79
69
7
25
7
loose
25
79
69
8
25
8
normal
1
79
69
2
18
1
strict
25
79
69
8
25
8
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
  • Available with a vendor prefix: -khtml- (2)
Removed
  • This feature was removed in a later browser version (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)

Syntax

CSS 
.loose {
  line-break: loose;
}
.strict {
  line-break: strict;
}

Live demo

Loose

CSS Loose demo.

PreviewFullscreen

Normal(normal)

CSS Normal(normal) demo.

PreviewFullscreen

Strict

CSS Strict demo.

PreviewFullscreen

Use cases

  • Using line-break

    The line-break CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features