Emulate text-overflow:ellipsis in Firefox with CSS

Soumis par jide le dim, 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 ven, 07/27/2007 - 14:14

Alex...

mumba matumba!...

XHTML and CSS

jide's blog

husee

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

assssssssssssssssssssssssssssssssssddddddddd
türk sex

répondre

some workarounds

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

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

répondre

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

répondre

It's a screenshot

lun, 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.

répondre

Thank you for sharing

mer, 02/25/2009 - 11:34 — Biju Subhash (non vérifié)

Thank you for sharing :D

Biju Subhash

répondre

[...] more than an ellipsis

mer, 12/17/2008 - 20:28 — more than an ellipsis « garann means (business) (non vérifié)

[...] 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. [...]

répondre

Don't know what special

jeu, 10/30/2008 - 22:01 — Levi (non vérifié)

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.

répondre

text-overflow: ellipsis DOES

ven, 10/24/2008 - 18:25 — Matonga (non vérifié)

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)

répondre

ddddddddddddddddddddddddddddd

mer, 09/24/2008 - 12:46 — asdasd (non vérifié)

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

répondre

is there a way to do this

jeu, 08/07/2008 - 17:51 — adam (non vérifié)

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

répondre

ttttttttttttttttttttttttttttt

jeu, 07/31/2008 - 09:51 — test (non vérifié)

ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttddddddddddddddddttttttttttttttttqqqqqqqqqqqqqqaaaaaaaaaaaaadddddddddddddddd

répondre

realetytrac realtytrac

sam, 07/26/2008 - 18:51 — investors realtytrac (non vérifié)

realetytrac realtytrac realetytrac realtytrac

répondre

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

mar, 07/15/2008 - 10:43 — Suka (non vérifié)

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

répondre

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

mar, 07/15/2008 - 10:40 — Suka (non vérifié)

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

répondre

Does anyone know if Firefox

mar, 07/01/2008 - 21:51 — David Levin (non vérifié)

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.

répondre

ryotwar sitosterin alco

ven, 04/18/2008 - 05:45 — Rusty Randolph (non vérifié)

ryotwar sitosterin alco defensibility exfoliation godwit otological collegium

Concordia University Nebraska

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

无人问津

répondre

i hope. abcba2c9f8 thanks

sam, 03/29/2008 - 21:39 — olczij (non vérifié)

i hope. abcba2c9f8 thanks

répondre

diet news duvet nyc

dim, 01/06/2008 - 14:55 — Vilyampx (non vérifié)

diet news duvet nyc

répondre

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

dim, 12/16/2007 - 06:18 — Jayce Design | Blog » Blog Archive » Text-Overflow using CSS (non vérifié)

[...] 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. [...]

répondre

Good site!

sam, 11/17/2007 - 13:03 — stsoftlt (non vérifié)

Good site!

répondre

btw, when I say this "does

jeu, 11/01/2007 - 23:49 — atomicrabbit (non vérifié)

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.

répondre

This code does not work in

jeu, 11/01/2007 - 20:49 — atomicrabbit (non vérifié)

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.

répondre

Safari also supports

sam, 10/27/2007 - 02:39 — b (non vérifié)

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.