CSS property word-break specifies line breaking rules between letters. Note that this different from word-wrap which applies when word does not fit in line box.
CSS property word-break
| CSS version: | CSS 3 |
| Value: | normal | keep-all | break-all |
| Initial: | normal |
| Inherited: | yes |
| Animatable: | no |
word-break values
| normal | Words are broken according to usual rules. |
| break-all | In addition to normal break points, word may break at any point. |
| keep-all | Breaks are prohibited between pairs of letters. This is more applicable for CJK words. For other words it behaves same as normal. |
Example – normal and break-all word-break
- normal: word will only break at natural break points (like dash).
- break-all: word will break anywhere between two letters.
In the following code, CSS property word-break can be changed to the following values
- normal
- break-all
<style>
.box {
width: 100px;
background-color: lightgreen;
word-break: normal;
}
</style>
<div class="box">
This is some text containing
some very-longwords
</div>word-break refresh
