- word-break
- Try it
- Syntax
- Values
- Formal definition
- Formal syntax
- Examples
- HTML
- CSS
- Specifications
- Browser compatibility
- See also
- overflow-wrap
- Try it
- Syntax
- Values
- Formal definition
- Formal syntax
- Examples
- Comparing overflow-wrap, word-break, and hyphens
- HTML
- CSS
- Result
- Specifications
- Wrapping and breaking text
- What is overflowing text?
- Finding the min-content size
- Breaking long words
- Adding hyphens
- The element
- See also
- Found a content problem with this page?
- CSS overflow-wrap Property
- Definition and Usage
- Browser Support
- CSS Syntax
- Property Values
- Related Pages
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
word-break
The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
Try it
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: revert-layer; word-break: unset;
The word-break property is specified as a single keyword chosen from the list of values below.
Values
Use the default line break rule.
To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).
Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal .
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).
Formal definition
Formal syntax
word-break =
normal |
keep-all |
break-all |
break-word
Examples
HTML
p>1. code>word-break: normalcode>p> p class="normal narrow"> This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 p> p>2. code>word-break: break-allcode>p> p class="breakAll narrow"> This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 p> p>3. code>word-break: keep-allcode>p> p class="keepAll narrow"> This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 p> p>4. code>word-break: break-wordcode>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
Browser compatibility
BCD tables only load in the browser
See also
overflow-wrap
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
Try it
Note: In contrast to word-break , overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.
The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap , and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap , with word-wrap being an alias.
Syntax
/* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; /* Global values */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: revert; overflow-wrap: revert-layer; overflow-wrap: unset;
The overflow-wrap property is specified as a single keyword chosen from the list of values below.
Values
Lines may only break at normal word break points (such as a space between two words).
To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.
The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.
Formal definition
Formal syntax
Examples
Comparing overflow-wrap, word-break, and hyphens
This example compares the results of overflow-wrap , word-break , and hyphens when breaking up a long word.
HTML
p> They say the fishing is excellent at Lake em class="normal">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>normalcode>) p> p> They say the fishing is excellent at Lake em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>overflow-wrap: anywherecode>) p> p> They say the fishing is excellent at Lake em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>overflow-wrap: break-wordcode>) p> p> They say the fishing is excellent at Lake em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>word-breakcode>) p> p> They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>hyphenscode>, without code>langcode> attribute) p> p lang="en"> They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>hyphenscode>, English rules) p> p class="hyphens" lang="de"> They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>hyphenscode>, German rules) p>
CSS
p width: 13em; margin: 2px; background: gold; > .ow-anywhere overflow-wrap: anywhere; > .ow-break-word overflow-wrap: break-word; > .word-break word-break: break-all; > .hyphens hyphens: auto; >
Result
Specifications
Wrapping and breaking text
This guide explains the various ways in which overflowing text can be managed in CSS.
What is overflowing text?
In CSS, if you have an unbreakable string such as a very long word, by default it will overflow any container that is too small for it in the inline direction. We can see this happening in the example below: the long word is extending past the boundary of the box it is contained in.
CSS will display overflow in this way, because doing something else could cause data loss. In CSS data loss means that some of your content vanishes. So the initial value of overflow is visible , and we can see the overflowing text. It is generally better to be able to see overflow, even if it is messy. If things were to disappear or be cropped as would happen if overflow was set to hidden you might not spot it when previewing your site. Messy overflow is at least easy to spot, and in the worst case, your visitor will be able to see and read the content even if it looks a bit strange.
In this next example, you can see what happens if overflow is set to hidden .
Finding the min-content size
To find the minimum size of the box that will contain its contents with no overflows, set the width or inline-size property of the box to min-content .
Using min-content is therefore one possibility for overflowing boxes. If it is possible to allow the box to grow to be the minimum size required for the content, but no bigger, using this keyword will give you that size.
Breaking long words
If the box needs to be a fixed size, or you are keen to ensure that long words can’t overflow, then the overflow-wrap property can help. This property will break a word once it is too long to fit on a line by itself.
Note: The overflow-wrap property acts in the same way as the non-standard property word-wrap . The word-wrap property is now treated by browsers as an alias of the standard property.
An alternative property to try is word-break . This property will break the word at the point it overflows. It will cause a break-even if placing the word onto a new line would allow it to display without breaking.
In this next example, you can compare the difference between the two properties on the same string of text.
This might be useful if you want to prevent a large gap from appearing if there is just enough space for the string. Or, where there is another element that you would not want the break to happen immediately after.
In the example below there is a checkbox and label. Let’s say, you want the label to break should it be too long for the box. However, you don’t want it to break directly after the checkbox.
Adding hyphens
To add hyphens when words are broken, use the CSS hyphens property. Using a value of auto , the browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. To have some control over the process, use a value of manual , then insert a hard or soft break character into the string. A hard break ( ‐ ) will always break, even if it is not necessary to do so. A soft break ( ) only breaks if breaking is needed.
You can also use the hyphenate-character property to use the string of your choice instead of the hyphen character at the end of the line (before the hyphenation line break).
This property also takes the value auto , which will select the correct value to mark a mid-word line break according to the typographic conventions of the current content language.
The element
In the below example the text breaks in the location of the .
See also
- The HTML element
- The CSS word-break property
- The CSS overflow-wrap property
- The CSS white-space property
- The CSS hyphens property
- Overflow and Data Loss in CSS
Found a content problem with this page?
This page was last modified on May 25, 2023 by MDN contributors.
Your blueprint for a better internet.
CSS overflow-wrap Property
Let the browser be allowed to break lines with long words, if they overflow the container:
Definition and Usage
The overflow-wrap property specifies whether or not the browser can break lines with long words, if they overflow the container.
Default value: | normal |
---|---|
Inherited: | yes |
Animatable: | no. Read about animatable |
Version: | CSS3 |
JavaScript syntax: | object.style.overflowWrap=»normal» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
Value | Description | Demo |
---|---|---|
normal | Long words will not break, even if they overflow the container. This is default | Demo ❯ |
anywhere | Long words will break if they overflow the container | Demo ❯ |
break-word | Long words will break if they overflow the container | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.