Text-overflow
Sometimes text will have to be clipped. For instance when it overflows the element’s box. When this happens, you want to leave a visual “hint” to the user that text has been clipped. This is were the text-overflow-props come in. The most common way to use it is the ellipsis character: “…” although, as the spec says, “the actual character representation may vary”. Opera supports this as well using it’s vendor prefix: -o-text-overflow.
Support for these features is very limited at the moment, WebKit only supports the short-hand text-overflow, and even that is only partly implemented. text-overflow: ellipsis-word; and text-overflow: inherit; don’t work yet. Internet Explorer, funnily enough, supports this too in IE6 and up, according to the MSDN page about it.
The following two divs contains the following text: “Lorem ipsum dolor sit amet, consectetur”. As you can see, it is clipped. The first uses text-overflow: ellipsis;, the second uses text-overflow: clip;.
text-overflow: ellipsis-word; , when implemented, should look like this:
Note that the current version of the spec does NOT contain text-overflow.