how to clip text in css like gmail does to emails subject listings

Question

in gmail, they display the

subject - followed by a short snippet from the body

and it looks like the body text is clipped, i am assuming this is done with css, gmail style sheets are fairly complex, so am not certain

anyway only parts of letters are showing at the end of the line where they get chopped off

does anyone know how i can achieve the same effect, so i get full length text in a column

---

got it sussed thanks @cletus

just to clarify, this is what i ended up with

<div style="overflow: hidden; height: 20px;">mytitle<span style="color: gray; "> - my long description goes here</span></div>

Answer 1

It's overflow: hidden CSS on block elements. The block-level element part is important. See The CSS Overflow Property.

Answer 2

This one won't work in IE6-7. Use text-overflow css property instead. More about it: http://www.blakems.com/archives/000077.html (this won't validate! Validator notices, that it's a css3 property which doesn't exists in css2.1...)

Answer 3

To get the full text-clipping effect, where only parts of letters show at the end of the element, just add:

white-space: nowrap;