Emulate text-overflow:ellipsis in Firefox with CSS

Submitted by jide on Sun, 06/18/2006 - 17:36

A CSS trick i wanted to achieve : reproduce the text-overflow:ellipsis which exists in Internet Explorer in Firefox.

Just to remember : the text-overflow property adds "..." at the end of a text if it is longer than the size of the bloc.

In Internet Explorer, with the following code :

span.ellipsis {

white-space:nowrap;

text-overflow:ellipsis;

overflow:hidden;

width:190px;

display:block;

}

It renders :

To reproduce the same on firefox, it has not been easy ! It is in fact impossible to do exactly the same effect. But just try to do the best we can :

The biggest issue is that we have to use 2 nested html tags to achieve this effect. Or at least i didn't succeed... Anyone ? ;)

So, with the following code :

<div class="ellipsis">

</div>

We should have this css stylesheet :

.ellipsis span {

white-space:nowrap;

text-overflow:ellipsis; /* for internet explorer */

overflow:hidden;

width:190px;

display:block;

}

html>body .ellipsis {

clear:both;

}

html>body .ellipsis span:after {

content: "...";

}

html>body .ellipsis span {

max-width:180px;

width:auto !important;

float:left;

}

Wich is rendrered like this in Firefox :

2 issues remain :

the text can be cut at the middle of a letter
the dots will display even if the text is short enough to fit in the bloc

Alex... mumba matumba!...

from Alex private blog on Fri, 07/27/2007 - 14:14

Alex...

mumba matumba!...

XHTML and CSS

jide's blog

husee

Sat, 03/06/2010 - 00:12 — Anonymous

assssssssssssssssssssssssssssssssssddddddddd
türk sex

some workarounds

Sat, 02/13/2010 - 14:23 — Anonymous

http://smileg.akmedia.ru/test/ellipsis/

I've been googling this ellipsis in Firefox with CSS in almost a month and I’ve been trough many links but it wont work and incomplete details but now I found the blogs that feeds my brain about ellipsis in Firefox with CSS. Thanks for the post!

arch steel buildings

It's a screenshot

Mon, 12/28/2009 - 09:23 — Anonymous

The two examples of how things are rendered are screenshots, so of course it looks to you as though it's rendered properly. Try a real example, though, and it'll blow up.

Thank you for sharing

Wed, 02/25/2009 - 11:34 — Biju Subhash (not verified)

Thank you for sharing :D

Biju Subhash

[...] more than an ellipsis

Wed, 12/17/2008 - 20:28 — more than an ellipsis « garann means (business) (not verified)

[...] more than an ellipsis I get a lot of hits when I Google truncating long text with an indication that more text exists, so I assume it’s a problem that interests a lot of people. There are some cool solutions for cutting off one line of text and placing an ellipsis. I was looking for code that would add a “Read More” link to the end of a block of text (meaning multiple lines), and that’s something Google wasn’t able to find for me. [...]

Don't know what special

Thu, 10/30/2008 - 22:01 — Levi (not verified)

Don't know what special browser you are using, but no ellipsis does not work even in the newest version of Firefox at the time of this posting.

text-overflow: ellipsis DOES

Fri, 10/24/2008 - 18:25 — Matonga (not verified)

text-overflow: ellipsis DOES work in my Firefox 3.0 version 3.0.3

I can see both first (text-overflow: ellipsis) and second (javascript patch) examples with corresponding ellipsis, though the CSS way is far more correct of course.

(Mozilla/5.0 (Windows; U; Windows NT 5.1; es-AR; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3)

ddddddddddddddddddddddddddddd

Wed, 09/24/2008 - 12:46 — asdasd (not verified)

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

is there a way to do this

Thu, 08/07/2008 - 17:51 — adam (not verified)

is there a way to do this with multi-line copy?

ttttttttttttttttttttttttttttt

Thu, 07/31/2008 - 09:51 — test (not verified)

ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttddddddddddddddddttttttttttttttttqqqqqqqqqqqqqqaaaaaaaaaaaaadddddddddddddddd

realetytrac realtytrac

Sat, 07/26/2008 - 18:51 — investors realtytrac (not verified)

realetytrac realtytrac realetytrac realtytrac

и че там китайцы хуйню

Tue, 07/15/2008 - 10:43 — Suka (not verified)

и че там китайцы хуйню написали - они думают что их кто нибудь понимает? у них совсем башка не работает

Ни хуя не пашет этот код, вы

Tue, 07/15/2008 - 10:40 — Suka (not verified)

Ни хуя не пашет этот код, вы долбоебы его вообще проверяли? бля

Does anyone know if Firefox

Tue, 07/01/2008 - 21:51 — David Levin (not verified)

Does anyone know if Firefox 3.0 supports the elipsis yet? Lets hope that they have learned from both IE and Safari that its okay to adopt some CSS properties even if they aren't official. Also, the W3C should get off their butts and start making CSS standards that we developers will actually want to use.

ryotwar sitosterin alco

Fri, 04/18/2008 - 05:45 — Rusty Randolph (not verified)

ryotwar sitosterin alco defensibility exfoliation godwit otological collegium

Concordia University Nebraska

http://www.afrlhorizons.com/Briefs/Dec01/ML0009.html

无人问津

i hope. abcba2c9f8 thanks

Sat, 03/29/2008 - 21:39 — olczij (not verified)

i hope. abcba2c9f8 thanks

diet news duvet nyc

Sun, 01/06/2008 - 14:55 — Vilyampx (not verified)

diet news duvet nyc

[...] Jide.fr uses CSS2 and 2

Sun, 12/16/2007 - 06:18 — Jayce Design | Blog » Blog Archive » Text-Overflow using CSS (not verified)

[...] Jide.fr uses CSS2 and 2 nested html tags to mimic this effect in Firefox, however there are several issues that remain, being that the text can be cut at the middle of a letter, and the dots will display even if the text is short enough to fit in the block. [...]

Good site!

Sat, 11/17/2007 - 13:03 — stsoftlt (not verified)

Good site!

btw, when I say this "does

Thu, 11/01/2007 - 23:49 — atomicrabbit (not verified)

btw, when I say this "does not work" i mean, it doesn't show the "..." at all in Firefox. It works fine in IE, but it SHOULD work in IE regardless.

This code does not work in

Thu, 11/01/2007 - 20:49 — atomicrabbit (not verified)

This code does not work in firefox for me. I don't know why. I copied it directly from the code above.

@Basil: The link you provided is not the greatest solution for a couple of reasons..

1) It uses javascript

2) It actually caused my firefox to crash while selecting text. It also flashed a horizontal scrollbar below each line of text when I was selecting the text.

It seems very buggy although it looks nice -- I like the fade at the end of the cut off text, although that only shows in Fx. I would stay away from this code for now, until it's refined.

Safari also supports

Sat, 10/27/2007 - 02:39 — b (not verified)

Safari also supports ellipsis, so this would likely result in double ellipsis. Also, there is an ellipsis character (…), which is different from 3 periods.

I have an idea of how you could solve the remaining problems:

Instead of the generated ellipsis, you used a background image of the ellipsis on the div, aligned to the bottom right. It would initially be covered up by a second span with a white background, filling up the remaining space after the float.

Then, the first span would have 10px of padding on the right. The max with for the span would be the same 180px (since the width doesn't include the padding). Then, as the first span grows to fill the div, the second span first shrinks and then gets pushed into the hidden area to the right, revealing the background ellipsis image.

If you wanted everything to work in ems instead of px, you could replace the background pattern with yet another span that was absolutely positioned and behind everything else (small z-index), with a real ellipsis character in it (maybe that span could be generated with "after"?).

You could use a little Javascript to add all these structures, so that you wouldn't have to do it manually, and you could exclude Safari.