최근 브라우저들에서 text-overflow: Ellipsis 적용하기

When you want to avoid that text in a web page wraps, you can use:

   overflow:hidden

However, it's nice to show to users that some content is actually missing. This is typically done with an ellipsis character, that is displayed as three dots:

   ...

Getting this working across all modern browsers has always been a pain in the neck, but there's an easy solution. First, make sure you have a small ellipsis-xbl.xml file on your web server that is served with the content type text/xml, with the following contents:

Then mark all HTML elements you would like to show the ellipsis character on overflow with the class Ellipsis, e.g.:

Then add the following to your CSS:

.Ellipsis {
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  -ms-text-overflow:ellipsis;
  -moz-binding:url(/ellipsis-xbl.xml#ellipsis)
}

Elaboration:

text-overflow
    for WebKit-based browsers (Safari, Chrome, etc.) and for Internet Explorer 7 and before;
-o-text-overflow
    for Opera;
-ms-text-overflow
    for Internet Explorer 8;
-moz-binding
    for Gecko-based browsers (Firefox, Camino, etc.)

Note that the text-overflow will be standardized as of the CSS 3 standard, which is currently still in draft.

Credit for the Gecko solution go to Rikkert Koppes and William Khoe, see the article text-overflow: ellipsis for firefox.

Update (Oct. 22, 2008): The solution for Gecko-based browsers (Firefox, etc.) is far from perfect. The solution has at least the following issues:

1. applying the .Ellipsis class to an inline element causes the element to disappear;
2. in Firefox 3.0 (not in Firefox 2.0), soft hyphens inside .Ellipsis elements always show as dashes;
3. text inside a .Ellipsis element can no longer be selected.

[출처] http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html