title: Truncating long strings with CSS: feasible yet?
body: <p>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?</p>
  
  <p>I've been truncating server-side by <em>logical</em> 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 <em>physical</em> width of the rendered text.</p>
  
  <p>I've found that IE has a <code>text-overflow: ellipsis</code> property that does exactly what I want, but I need this to be cross-browser.  This property <a href="http://www.quirksmode.org/css/textoverflow.html" rel="noreferrer">seems to be (somewhat?) standard</a> but isn't supported by Firefox.  I've found <a href="http://www.jide.fr/emulate-text-overflowellipsis-in-firefox-with-css" rel="noreferrer">various</a>  <a href="https://stackoverflow.com/questions/480722/how-can-i-set-a-td-width-to-visually-truncate-its-displayed-contents">workarounds</a> based on <code>overflow: hidden</code>, 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).</p>
  
  <p>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?</p>