Text and fonts - HTML5 and CSS3 - page 422

Text overflow
It may be that you want to keep the word
on one line, so break-word isn't appropri-
ate. A normal way to do this in CSS2 is to
set the element to overflow: hidden. h1 {
overflow: hidden; }

This works, but it doesn't look tidy. The
word is cut off part way through a letter.

The text-overflow property lets you make
things look neater:

h1 {
overflow: hidden;
text-overflow: ellipsis;
}

Now the word ends at a letter, and an
ellipsis gives a visual indication that the
word has been truncated. This property is
particularly useful if you're dealing with
user-generated content that appears in
constrained areas—for example, a Twitter
feed in a sidebar.

Standard Prefixed

1.0 -

7.0 -

6.0 -

11.0 9.0

1.3 -