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
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
Deprecated
-
Has the same effect as
word-break: normalandoverflow-wrap: anywhere, regardless of the actual value of theoverflow-wrapproperty.
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).
Note: While word-break: break-word is deprecated, it has the same effect, when specified, as word-break: normal and overflow-wrap: anywhere — regardless of the actual value of the overflow-wrap property.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
word-break =
normal |
keep-all |
break-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 |
Browser compatibility
BCD tables only load in the browser
See also
in a td of a table i have a very long single word «Pneumonoultramicroscopicsilicovolcanoconiosis» and i want to reduce the width of table but unable to do because of this long word in one of the td i can break this word by giving <br /> but is there any CSS way to break this word according to available space. without giving line break or edit anything in HTML.
asked Jul 28, 2010 at 4:13
Jitendra VyasJitendra Vyas
147k229 gold badges568 silver badges846 bronze badges
Try the following:
word-wrap: break-word;
white-space: normal;
word-wrap is css3 (however it works in IE). You might not be able to get it working in older browsers however.
answered Jul 28, 2010 at 4:19
3
The following works for me:
word-wrap: break-word;
word-break: break-all;
white-space: normal;
answered Apr 22, 2014 at 11:03
TigertronTigertron
5985 silver badges6 bronze badges
1
Try the following code for break word if there is not any space.
word-wrap: break-word;
word-break: break-all;
Cilan
12.8k3 gold badges34 silver badges51 bronze badges
answered Apr 5, 2014 at 10:48
Kausha MehtaKausha Mehta
2,8182 gold badges19 silver badges31 bronze badges
td span{display:block;width:your_max_width_here.px}
<td><span>Pneumonoultramicroscopicsilicovolcanoconiosis</span></td>
answered Jul 28, 2010 at 4:16
2
try my code —
With Table body
table>tbody>tr>th{
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
Without Table body
table>tr>th{
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
answered Oct 1, 2015 at 11:06
Dadaso ZanzaneDadaso Zanzane
6,0091 gold badge25 silver badges25 bronze badges
I’ve tried different combinations of solutions found here and in other pages but it never worked as expected for me — the short words were split even if they had space on the line below and it looked goofy.
Finally I’ve found this compromise:
table {
table-layout: fixed;
overflow-wrap: break-word;
word-wrap: break-word; /* IE */
}
If you want to treat your rows equally, it works best.
answered Dec 29, 2016 at 20:31
Following code should work;
td {word-break: break-all}
answered Jun 10, 2015 at 7:08
Baqer NaqviBaqer Naqvi
5,7313 gold badges46 silver badges68 bronze badges
I found when you have a mixture of content in the cell, some long single words mixed in with other short words, that word-break: break-word; works best. It will break on whitespace when possible. Although this doesn’t appear to be supported in IE11. If you set break-all to either of the mentioned properties, it will always break within a word (unless it’s lucky enough to be on a space).
answered Aug 29, 2017 at 21:46
Derek WadeDerek Wade
6778 silver badges11 bronze badges
The modern (post IE) way is:
td {
overflow-wrap: anywhere;
}
Except that – as of this writing – it is not supported in Safari. Stay tuned.
Here is a test.
answered Jul 12, 2022 at 10:57
andraasparandraaspar
7766 silver badges10 bronze badges
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
The word-break property in CSS can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen.
In the example below we can make the word-break between letters instead:
.element {
word-break: break-all;
}If we then set the width of the text to one em, the word will break by each letter:
See the Pen Setting text vertically with word-break by CSS-Tricks (@css-tricks) on CodePen.
This value is often used in places with user generated content so that long strings don’t risk breaking the layout. One very common example is a long copy and pasted URL. If that URL has no hyphens, it can extend beyond the parent box and look bad or worse, cause layout problems.
See the Pen Fixing links with word-break by CSS-Tricks (@css-tricks) on CodePen.
Values
normal: use the default rules for word breaking.break-all: any word/letter can break onto the next line.keep-all: for Chinese, Japanese and Korean text words are not broken. Otherwise this is the same asnormal.
This property is also often used in conjunction with the hyphens property so that when breaks occur a hypen is inserted, as per the standard in books.
The full usage, with needed vendor prefixes, is:
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;Using these properties on the universal selector can be useful if you have a site with a lot of user-generated content. Although fair warning, it can look weird on titles and pre-formatted text (
- overflow-wrap
- hyphens
- white-space
- Handling Long Words and URLs
Browser Support
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 111 | 110 | 4.4 | 7.0-7.1 |
Safari and iOS support the break-all value but not keep-all
Example
Break words at any character:
p.a {
word-break: break-all;
}
Try it Yourself »
Definition and Usage
The word-break property specifies how words
should break when reaching the end of a line.
Show demo ❯
| Default value: | normal |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.wordBreak=»break-all» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS Syntax
word-break: normal|break-all|keep-all|break-word|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| normal | Default value. Uses default line break rules | |
| break-all | To prevent overflow, word may be broken at any character | Demo ❯ |
| keep-all | Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value «normal» |
Demo ❯ |
| break-word | To prevent overflow, word may be broken at arbitrary points | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
The word-break property specifies where the lines should be broken.
Normally, line breaks only occur in certain spaces when there is a space or a hyphen. But when the word-break property is set to the break-all value, the browser will break lines at any point.
This property is one of the CSS3 properties.
word-break: normal | break-all | keep-all | break-word | initial | inherit;Example of the word-break property:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
html,
body {
height: 100%;
}
body {
font-family: Helvetica, san serif;
display: flex;
justify-content: center;
align-items: center;
background-color: #8ebf42;
}
p {
word-break: break-all;
line-height: 1;
text-transform: uppercase;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #eee;
width: 1em;
}
</style>
</head>
<body>
<p>element</p>
</body>
</html>Result
In the following example the words break in the text.
Example of the word-break property with the «break-all» value:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
font-size: 0.95em;
line-height: 1.5;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
margin: 50px auto;
max-width: 700px;
}
.text {
padding: 20px;
background-color: #666;
color: white;
text-align: justify;
}
.break {
word-break: break-all;
}
strong {
background-color: #000;
}
</style>
</head>
<body>
<h2>Word-break property example</h2>
<div class="container">
<h3>Text breaks inside words</h3>
<p class="text break">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem <strong>Ipsum</strong> has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <strong>remaining</strong> essentially unchanged.
</p>
</div>
</body>
</html>