CSS line-break Property


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
Applies to
All elements
Computed value
Specified value
JavaScript syntax


line-break: auto | loose | normal | strict 


  • 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.


<div lang="ja">
<p class="wrapbox auto">
auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
<p class="wrapbox loose">
loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
<p class="wrapbox normal">
normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
<p class="wrapbox strict">
strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
<p class="wrapbox anywhere">
anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
.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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 24th September 2023