CSS line-break Property

CSS line-break Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The line-break property controls the rules the user agent uses when deciding where to break lines within inline content. It is particularly important for scripts and languages that do not use spaces between words (for example, many East Asian scripts), because it influences whether the browser may break between punctuation, characters, or symbol groups. At a conceptual level it tells the renderer how permissive or strict to be when inserting line breaks so the layout maintains readable and typographically sensible line endings.

Because line breaking is just one part of text layout, authors typically use it in combination with other properties that affect word wrapping, whitespace handling and spacing. For controlling how words themselves may be split, consider word-break. To influence whether long words wrap or cause overflow, check overflow-wrap. The treatment of explicit whitespace and collapsing behavior is governed by white-space, and vertical rhythm and perceived density of lines can change how breaks feel when you adjust line-height. Together these properties let you tune both the mechanical breaking rules and the visual result.

In practical use, authors employ line-break to improve readability in multilingual layouts, to avoid awkward orphaned punctuation at line starts or ends, and to make automatic wrapping behave closer to typographic norms for the script in question. It’s also useful when dealing with UI components with constrained widths (buttons, tags, cards) where predictable breaking prevents layout overflow or visual glitches. When refining behavior further, pairing it with hyphenation controls such as hyphens or with language-specific markup can produce much better results than relying on default, language-agnostic break rules.

Definition

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

Interactive Demo

line-break: auto;

line-break: anywhere;

line-break: normal;

line-break: loose;

この喫茶店は、いつでもコーヒーの香りを漂わせています。
彼女はこの喫茶店で働いて、着々と実力をつけていきました。
今では知る人ぞ知る、名人です。

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 class='container'>

  <h1>CSS line-break examples</h1>



  <div class='example'>

    <h2>line-break: auto</h2>

    <div class='sample line-auto'>

      <p>这是一个用于测试换行行为的示例文本。This is a sample text to demonstrate line-break behavior. 混合中文、English 和日本語の長い文章を含みます。</p>

    </div>

  </div>



  <div class='example'>

    <h2>line-break: loose</h2>

    <div class='sample line-loose'>

      <p>这是一个用于测试换行行为的示例文本。This is a sample text to demonstrate line-break behavior. 混合中文、English 和日本語の長い文章を含みます。</p>

    </div>

  </div>



  <div class='example'>

    <h2>line-break: normal</h2>

    <div class='sample line-normal'>

      <p>这是一个用于测试换行行为的示例文本。This is a sample text to demonstrate line-break behavior. 混合中文、English 和日本語の長い文章を含みます。</p>

    </div>

  </div>



  <div class='example'>

    <h2>line-break: strict</h2>

    <div class='sample line-strict'>

      <p>这是一个用于测试换行行为的示例文本。This is a sample text to demonstrate line-break behavior. 混合中文、English 和日本語の長い文章を含みます。</p>

    </div>

  </div>

</div>

CSS

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica', Arial;
  background: #f6f7f9;
  color: #111;
  padding: 24px;
}

.container {
  max-width: 760px;
  margin: 0 auto;
}

h1 {
  font-size: 20px;
  margin-bottom: 14px;
}

.example {
  margin-bottom: 18px;
}

.example h2 {
  font-size: 14px;
  margin: 8px 0;
  color: #2b2b2b;
}

.sample {
  width: 340px; /* narrow box to force wrapping */
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e0e4e8;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(16,24,40,0.03);
  font-size: 15px;
  line-height: 1.45;
  white-space: normal;
  word-wrap: break-word;
}

/* Different line-break behaviors */
.line-auto {
  line-break: auto;
}

.line-loose {
  line-break: loose;
}

.line-normal {
  line-break: normal;
}

.line-strict {
  line-break: strict;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS line-break property. Hover over a browser icon to see the version that first introduced support for this CSS property.