How do I only display part of a string using css

Question

I want to be able to display a string of characters up to 10 characters. If the string goes over 10 characters, I\'d like to append \'...\' to the end.

For example, if

Answer 1

it´s called ellipsis and you can use it on a block element.

However it does not work in Firefox and you cannot set the width to exactly 10 characters as you cannot specify the width in characters in css.

If you want exactly 10 characters and Firefox compatibility you will have to use javascript or a server-side solution.

check ellipsis:http://www.quirksmode.org/css/textoverflow.html

or try this:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

jQuery plugin for this:

http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/