CSS line-break Property

Description

The line-break CSS property is used to control how text within an element should break and wrap when it encounters line-breaking opportunities, such as spaces or hyphens. It can be set to various values, with the two primary options being "normal" and "strict." When set to "normal," text is allowed to break and wrap at standard line-breaking points, optimizing for legibility. Conversely, when set to "strict," text is prevented from breaking in the middle of words or characters, ensuring that words remain intact but potentially leading to longer lines. This property is particularly useful when dealing with languages that have complex scripts or for precise control over text wrapping behavior in web design.

Initial value: auto
Applies to: All elements
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.lineBreak

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

HTML

<div lang="ja">

  <p class="wrapbox auto">

    auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。

  </p>

  <p class="wrapbox loose">

    loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。

  </p>

  <p class="wrapbox normal">

    normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。

  </p>

  <p class="wrapbox strict">

    strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。

  </p>

  <p class="wrapbox anywhere">

    anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。

  </p>

</div>

CSS

.wrapbox {
  width: 10em;
  margin: 0.5em;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}
.auto {
  line-break: auto;
}
.loose {
  line-break: loose;
}
.normal {
  line-break: normal;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}

Result