`word-break` CSS property

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.

Try it

word-break: normal;

word-break: break-all;

word-break: keep-all;

word-break: break-word;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Honorificabilitudinitatibus califragilisticexpialidocious
    Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
    ã°ã¬ã¼ãããªãã³ããã³åã¢ã¤ã«ã©ã³ãé£åçå½ã¨ããè¨èã¯æ¬å½ã«é·ãè¨è
  </div>
</section>

#example-element {
  width: 80%;
  padding: 20px;
  text-align: start;
  border: solid 1px darkgray;
}

Syntax

css

/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: auto-phrase; /* experimental */
word-break: break-word; /* deprecated */

/* Global values */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;

The word-break property is specified as a single keyword chosen from the list of values below.

Values

normal: Use the default line break rule.
break-all: To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).
keep-all: Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal.
auto-phrase: Has the same effect as word-break: normal except that language-specific analysis is performed to improve word breaks by not placing them in the middle of natural phrases.
break-word: Has the same effect as overflow-wrap: anywhere combined with word-break: normal, regardless of the actual value of the overflow-wrap property.

Note: In contrast to word-break: break-word and overflow-wrap: break-word (see overflow-wrap), word-break: break-all will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).

The specification also lists an additional value, manual, which is not currently supported in any browsers. When implemented, manual will have the same effect as word-break: normal except that breaks won't be automatically inserted in Southeast Asian languages. This is needed because, in such languages, user agents frequently place breaks in suboptimal positions. manual will allow you to insert line breaks in optimal positions manually.

Formal definition

Initial value	`normal`
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

word-break = 
  normal       |
  break-all    |
  keep-all     |
  manual       |
  auto-phrase  |
  break-word

Examples

HTML

html

<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  ã°ã¬ã¼ãããªãã³ããã³åã¢ã¤ã«ã©ã³ãé£åçå½ã¨ããè¨èã¯æ¬å½ã«é·ãè¨è
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  ã°ã¬ã¼ãããªãã³ããã³åã¢ã¤ã«ã©ã³ãé£åçå½ã¨ããè¨èã¯æ¬å½ã«é·ãè¨è
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  ã°ã¬ã¼ãããªãã³ããã³åã¢ã¤ã«ã©ã³ãé£åçå½ã¨ããè¨èã¯æ¬å½ã«é·ãè¨è
</p>

<p>4. <code>word-break: manual</code></p>
<p class="manual narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  ã°ã¬ã¼ãããªãã³ããã³åã¢ã¤ã«ã©ã³ãé£åçå½ã¨ããè¨èã¯æ¬å½ã«é·ãè¨è
</p>

<p>5. <code>word-break: auto-phrase</code></p>
<p class="autoPhrase narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  ã°ã¬ã¼ãããªãã³ããã³åã¢ã¤ã«ã©ã³ãé£åçå½ã¨ããè¨èã¯æ¬å½ã«é·ãè¨è
</p>

<p>6. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  ã°ã¬ã¼ãããªãã³ããã³åã¢ã¤ã«ã©ã³ãé£åçå½ã¨ããè¨èã¯æ¬å½ã«é·ãè¨è
</p>

CSS

css

.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.manual {
  word-break: manual;
}

.autoPhrase {
  word-break: auto-phrase;
}

.breakWord {
  word-break: break-word;
}