X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS line-break Property

The line-break property specifies how to break lines of Chinese, Japanese, or Korean text working with punctuation and symbols. But, these languages have different rules. This line break might not occur. For example, if the value is set to "strict", break before hyphens are not allowed in Chinese and Japanese languages.

The CSS specification emphasizes rules only for Chinese, Japanese and Korean.

For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera are used with this property.

The line-break is deprecated, use the word-break property instead.

Initial Value auto
Applies to All elements.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.lineBreak = "loose";

Syntax

line-break: auto | loose | normal | strict | initial | inherit;

Example of the CSS line-break property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .korean {
      line-break: strict;
      }
    </style>
  </head>
  <body>
    <h2>Line-break property example</h2>
    <!--Be the change you want to see in the world.-->
    <span class="korean">세상에서 보고싶은 변화가 있다면 당신 스스로 그 변화가 되어라.</span>
  </body>
  </body>
</html>

Example of the CSS line-break property with the "normal" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      font-size:16px;
      line-height:24px;
      line-break: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-break property example</h2>
    <p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p>
  </body>
</html>

Values

Value Description
auto Breaks the text using the default line break rule. This is the default value of this property.
normal Breaks the text using the least restrictive line break rule: such as in newspapers.
loose Breaks the text using the most common line break rule.
strict Breaks the text using the most stringent line break rule.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

58.0+
1.0 -webkit-
14.0+ x v 45.0+


Do you find this helpful?

Related articles