Truncating long strings with CSS: feasible yet?
Posted
by Sam Stokes
on Stack Overflow
See other posts from Stack Overflow
or by Sam Stokes
Published on 2009-04-29T12:40:44Z
Indexed on
2010/04/10
0:03 UTC
Read the original article
Hit count: 326
Is there any good way of truncating text with plain HTML and CSS, so that dynamic content can fit in a fixed-width-and-height layout?
I've been truncating server-side by logical width (i.e. a blindly-guessed number of characters), but since a 'w' is wider than an 'i' this tends to be suboptimal, and also requires me to re-guess (and keep tweaking) the number of characters for every fixed width. Ideally the truncation would happen in the browser, which knows the physical width of the rendered text.
I've found that IE has a text-overflow: ellipsis
property that does exactly what I want, but I need this to be cross-browser. This property seems to be (somewhat?) standard but isn't supported by Firefox. I've found various workarounds based on overflow: hidden
, but they either don't display an ellipsis (I want the user to know the content was truncated), or display it all the time (even if the content wasn't truncated).
Does anyone have a good way of fitting dynamic text in a fixed layout, or is server-side truncation by logical width as good as I'm going to get for now?
© Stack Overflow or respective owner