CODEWITHSUNDEEP
css
Franco
Franco

Reputation: 2926

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

thisisastringthatis30characterslong

would become

thisisastr...

Is this possible using CSS?

Cheers!

Upvotes: 15

Views: 37976

Answers (3)

GetsugaTensho
GetsugaTensho

Reputation: 29

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

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

Upvotes: 0

Draco Ater
Draco Ater

Reputation: 21226

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.

Upvotes: 9

jeroen
jeroen

Reputation: 91734

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.

Upvotes: 11

Related Questions