W3docs
en
Log in

CSS line-break Property

Use the line-break CSS property to specify at which line the text should be cut. Definition of the property, values and examples.

The line-break property specifies how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols. Because these languages follow different typographic rules, line breaks may not always occur at expected points. For instance, when set to strict, line breaks are only allowed at specific points, such as after certain punctuation marks, rather than before hyphens or arbitrary characters. The CSS specification defines rules specifically for Chinese, Japanese, and Korean (CJK) text.

Initial Valueauto
Applies toAll elements, but only on block containers.
InheritedYes.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.lineBreak = "loose";

Syntax

Syntax of CSS line-break Property

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

Example of the line-break property:

Example of CSS line-break Property with strict value

<!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>
</html>
Try it Yourself »

Result

CSS line-break Property

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

Example of CSS line-break Property with 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>日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。</p>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
autoBreaks the text using the default line break rule. This is the initial value of the property.
normalBreaks the text using the least restrictive line break rules.
looseBreaks the text using the most common line break rules.
strictBreaks the text using the most restrictive line break rules.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

Which of the following ways can be used to insert a line break in CSS?