How do I display only the first 10 characters from a string using CSS?

I have a string of 30 characters

I want to only display the first 10 followed by ...

so for example

thisisastringthatis30characte开发者_开发百科rslong

would become

thisisastr...

Is this possible using CSS?

Cheers!

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.

There is a CSS3 based solution text-overflow:ellipsis; claimed to be crossbrowser. But also it will show as many chars as fit, not exactly 10.

#containerx {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 60%;
}

by adjusting the width you can control number of characters to display