The word-break property
The word-break property allows you to
move the letters of a long word to a new line
if this word does not fit into the width of
container.
Syntax
cssselector {
word-break: break-all | keep-all | normal;
}
Values
| Value | Description |
|---|---|
break-all |
Causes long words to wrap on a new line if that word does not fit in container. |
keep-all |
To break hieroglyphs. |
normal |
Standard behavior: if a long word does not fit the width of container, it will simply crawl outside its border (and start on a new line). |
Default value: normal.
Example . The normal value
In this example, a very long word will not fit into container and will fall outside its boundaries (and will start on a new line):
html<div id="elem">
Lorem ipsum dolor sit amet
vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
consectetur adipiscing elit.
</div>css#elem {
width: 200px;
word-break: normal;
border: 1px solid red;
}
Результат:
Example . The break-all value
And now those letters that did not fit will simply be moved to the next line:
html<div id="elem">
Lorem ipsum dolor sit amet
vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
consectetur adipiscing elit.
</div>css#elem {
width: 200px;
word-break: break-all;
border: 1px solid red;
}
Результат:
See also
-
the
overflow-wrapproperty
that also allows you to wrap the letters of a long word to a new line -
the
hyphensproperty
that enables hyphenation of words by syllables -
the
overflowproperty
that cuts off parts that extend beyond the block boundary -
the
wbrtag
that implements soft hyphens using HTML -
the
brtag
with that you can force text to wrap on a new line