HTML and CSS Reference
In-Depth Information
For regular paragraphs of text, this
isn't usually a problem. But it can be
an issue for headings and URL s, par-
ticularly if they're in constrained-
width containers such as sidebars or
text columns. Imagine that you have
a word-of-the-day feature in your
site's sidebar. The sidebar has a
width of 15em, which is normally
plenty of room; but one day the
word is a long one:
Standard
Prefixed
1.0
-
3.5
-
5.5
-
10.50
-
1.0
-
<div>
<h1>Floccinaucinihilipilification</h1>
<p>The act or habit of describing or regarding
something as unimportant.</p>
</div>
Even though the width of the ele-
ment is constrained, the length of
the word forces the entire con-
tainer to be wider:
div { width: 15em; }
Note that the paragraph is still
constrained by the width set.
Here's where you can use the
word-wrap property. Setting a value
of break-word allows wrapping to
occur within the long word:
div { width: 15em; }
h1 { word-wrap: break-word; }
Search WWH ::




Custom Search