Cut of text if too wide in CSS or Asp.net

Question

Hi,

I have this text inside a div with a fixed width:

Some headline (2009-10-10 small)
Some headline (2009-10-10 small)
Some headline (2009-10-10 large)

But when the headline is too wide the result is:

Some headline (2009-10-10 small)
Some wide headline (2009-10-10
large)
Some headline (2009-10-10 large)

Which is not good looking :/ What I really wants is:

Some headline (2009-10-10 small)
Some wide... (2009-10-10 large)
Some headline (2009-10-10 large)

Is this possible to make with Asp.net and CSS? I know I can measure a string width in Asp.net but it (as I know) is not very precise.

Answer 1

What you need is to truncate the text if it exceeds a certain visual length. CSS can be used to hide the exceeding characters, but the truncation has to be done at code level (server-size or javascript).

This can be a little tricky if you are trying to turncate by character count unless you are using fixed-width fonts. Alternatively, you can try a more conservative max character count.

I'm sure there are more creative methods, I'm eager to 'hear' from the rest.

Answer 2

This is how I do it with mootools:

http://mooshell.net/34WbY/

Resize your browser to see the magic.