word-break
Quick Summary for word-break
The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
Code Usage for word-break
/* Keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* deprecated */  /* Global values */ word-break: inherit; word-break: initial; word-break: revert; word-break: unset; 
More Details for word-break

word-break

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

Syntax

/* Keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* deprecated */  /* Global values */ word-break: inherit; word-break: initial; word-break: revert; 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.

break-word

Has the same effect as word-break: normal and overflow-wrap: anywhere, 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).

Formal definition

Initial valuenormal
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

normal | break-all | keep-all | break-word

Examples

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: break-word</code></p> <p class="breakWord narrow">This is a long and   Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> 

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; }  .breakWord {   word-break: break-word; } 

Specifications

Specification
CSS Text Module Level 3 # word-break-property

See also

overflow-wrap hyphens line-break Guide to wrapping and breaking text

Last modified: Jan 25, 2022, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
There is a qualitative and quantitative difference between a day that begins with a little exercise, a book, meditation, a good meal, a thoughtful walk, and the start of a day that begins with a smartphone in bed.
Unknown
Random CSS Property

:host()

The :host() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.
:host() css reference