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

Question

I have a string of 30 characters

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

so for example

thisisastringthatis30characterslong

would become

thisisastr...

Is this possible using CSS?

Cheers!

score 11 · Accepted Answer · answered Mar 03 '11 at 14:29

11

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.

answered Mar 03 '11 at 14:29

jeroen

that's awesome - I need this kind of functionality quite a lot - I had never bothered to ask if it existed because I subsumed that it wouldn't. Nice to know about it. – stephenmurdoch Mar 03 '11 at 14:36
Cool cheers for that, ill just use a preg_match on the first ten characters and then add on the ... thanks again – Franco Mar 03 '11 at 14:38

Draco Ater · Answer 2 · 2013-10-28T16:26:42.643

8

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.

edited Oct 28 '13 at 16:26

answered Mar 03 '11 at 14:33

Draco Ater

2

It seems that will stop working in Firefox 4: http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4 – jeroen Mar 03 '11 at 14:36

score 0 · Answer 3 · edited Nov 19 '21 at 00:01

0

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

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

edited Nov 19 '21 at 00:01

no ai please

answered Nov 18 '21 at 15:02

GetsugaTensho

3 Answers3