HTML and CSS Reference
In-Depth Information
FIGURE 3.12
The progression
you can achieve with
text-overflow: ellipsis;
.
+ overflow: hidden;
+ text-overflow: ellipsis
FIGURE 3.13
The effect of
word-wrap: break-word;
.
BREAKING LONG WORDS WITH WORD-WRAP
The new
word-wrap
property offers another potential solution to the problem
of words overflowing narrow containers. It's included on the
<p>
element in my
word-wrap.html example in the chapter3 code download folder:
p {
word-wrap: break-word;
}
Instead of providing a nicer look to the clipped overflowed text,
word-wrap
forces the word to break so that it fits inside the container, as shown in
Figure 3.13
.
Again, this property is supported across all major modern browsers.
