CSS line-break Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

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

<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>
.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;
}

Browser Support

The following table will show you the current browser support for the CSS line-break property.

Desktop
Edge Chrome Firefox Opera Safari
1458694511
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
58794311758

Last updated by CSSPortal on: 2nd January 2024