1. css
  2. /properties
  3. /line-break

line-break

Definition

The line-break property is used to specify how lines should break within a block of text. It controls how line wrapping occurs when the text overflows the boundaries of its container. This property affects only non-replaced inline elements and text content.

Examples

Setting line-break to auto:

p {
  line-break: auto;
}

Setting line-break to loose:

h1 {
  line-break: loose;
}

Setting line-break to strict:

span {
  line-break: strict;
}

Values

ValueDescription
autoDefault value. Specifies that line breaks should occur automatically.
looseSpecifies that the browser can break lines between any two characters.
normalSpecifies that the browser can break lines only at spaces and allowed hyphens.
strictSpecifies that the browser should break lines only at allowed breakpoints.
anywhereSpecifies that the browser can break lines at any point.
unsetThe line breaking behavior is set to its inherited value if any, otherwise it is set to the default value.

Best Practices

  • Use line-break to control how lines should break within a block of text.
  • Use auto if you want the browser to automatically break lines.
  • Use normal to prevent breaks within words, and only allow breaks between words.
  • Use strict to only allow breaks at specific breakpoints, such as hyphens or spaces.
  • Use anywhere if you want the browser to break lines at any point, even within words.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes