The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

70 Chapter 6

The text-overflow property was originally specified in the Text Module,

but has since been moved to the Basic User Interface Module (http://www

.w3.org/TR/css3-ui/). This property is implemented in all major browsers.

The specification also extends the basic syntax in two ways. First, you

can provide two values to the property—a first for overflow at the end of a

line and a second for overflow at the start. For example, if you negatively

indented text that also overflowed its container, you could put ellipses on

both ends:

E { text-overflow: ellipsis ellipsis; }

The second extension offers a third possible keyword value, which is a

string of characters to be used instead of the ellipsis, like in this example

where I use a tilde to show the overflow:

E { text-overflow: '~'; }

These extensions are currently implemented only in Firefox and are

marked in the spec as being at risk of being removed at a later date.

aligning Text

The text-align property has been around for a long time, but CSS3 adds

two new values to it: start and end. For people who read left-to-right, they

are equivalent to the values left and right (respectively). Their real use-

fulness is on internationalized sites that may also use right-to-left text,

however. You can use these new values in most modern browsers, with the

exception of Internet Explorer.

New to CSS3 is the text-align-last property, which lets you set the

alignment of the last (or only) line of text in a justified block. This prop-

erty accepts the same values as text-align:

E { text-align-last: keyword; }

So if you want to justify a block of text but also align the last line to the

right, you would use

p {

text-align: justify;

text-align-last: right;

}

At the time of writing, this extension is implemented in Internet Explorer

(although, again, without the start and end keyword values), Firefox with the

-moz- prefix, and Chrome.