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; .
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.
Search WWH ::

Custom Search