Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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!

like image 493
Franco Avatar asked Mar 03 '11 14:03

Franco


People also ask

How do you display part of a string?

The substr() method extracts a part of a string. The substr() method begins at a specified position, and returns a specified number of characters. The substr() method does not change the original string. To extract characters from the end of the string, use a negative start position.

How do I make text appear on one line in CSS?

The best way to use is white-space: nowrap; This will align the text to one line.


2 Answers

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.

like image 74
jeroen Avatar answered Sep 23 '22 21:09

jeroen


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.

like image 22
Draco Ater Avatar answered Sep 23 '22 21:09

Draco Ater