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">
<span>A very, very, very, very, very, very, very, very, very long text</span>
</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 :
Alex...
mumba matumba!...
husee
sam, 03/06/2010 - 00:12 — Anonymousassssssssssssssssssssssssssssssssssddddddddd
türk sex
some workarounds
sam, 02/13/2010 - 14:23 — Anonymoushttp://smileg.akmedia.ru/test/ellipsis/
I've been googling this
ven, 01/22/2010 - 15:59 — AnonymousI'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
lun, 12/28/2009 - 09:23 — AnonymousThe 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
mer, 02/25/2009 - 11:34 — Biju Subhash (non vérifié)Thank you for sharing :D
Biju Subhash
[...] 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. [...]
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.
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)
ddddddddddddddddddddddddddddd
mer, 09/24/2008 - 12:46 — asdasd (non vérifié)dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
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?
ttttttttttttttttttttttttttttt
jeu, 07/31/2008 - 09:51 — test (non vérifié)ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttddddddddddddddddttttttttttttttttqqqqqqqqqqqqqqaaaaaaaaaaaaadddddddddddddddd
realetytrac realtytrac
sam, 07/26/2008 - 18:51 — investors realtytrac (non vérifié)realetytrac realtytrac realetytrac realtytrac
и че там китайцы хуйню
mar, 07/15/2008 - 10:43 — Suka (non vérifié)и че там китайцы хуйню написали - они думают что их кто нибудь понимает? у них совсем башка не работает
Ни хуя не пашет этот код, вы
mar, 07/15/2008 - 10:40 — Suka (non vérifié)Ни хуя не пашет этот код, вы долбоебы его вообще проверяли? бля
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.
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
无人问津
i hope. abcba2c9f8 thanks
sam, 03/29/2008 - 21:39 — olczij (non vérifié)i hope. abcba2c9f8 thanks
diet news duvet nyc
dim, 01/06/2008 - 14:55 — Vilyampx (non vérifié)diet news duvet nyc
[...] 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. [...]
Good site!
sam, 11/17/2007 - 13:03 — stsoftlt (non vérifié)Good site!
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.
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.
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.
http://www.hedgerwow.com/360/
mer, 09/05/2007 - 03:40 — Basil (non vérifié)http://www.hedgerwow.com/360/dhtml/text_overflow/demo.php
Make Text-Overflow work on both IE and Firefox
[...]
mar, 08/28/2007 - 13:52 — aoao » Blog Archive » 帅到掉厕所的-aoao-text-overflow:ellipsis (non vérifié)[...] Firefox实现text-overflow的也有差不多行滴,一个是JS+XBL,另一个CSS的:after 的,以前在试着写用xbl来监视文本的宽度的配合:after,不用想就知道我是失败的,如果单XBL可以行的话,别人也不用配合JS来写了。 [...]
[...]
sam, 05/05/2007 - 15:49 — 无人问津 : 帅到掉厕所的 -text-overflow:ellipsis (non vérifié)[...] Firefox实现text-overflow的也有差不多行滴,一个是JS+XBL,另一个CSS的:after 的,以前在试着写用xbl来监视文本的宽度的配合:after,不用想就知道我是失败的,如果单XBL可以行的话,别人也不用配合JS来写了。 [...]
hide -- Sharepointer is
mar, 05/01/2007 - 21:55 — Andy (non vérifié)hide -- Sharepointer is referring to Kevin Cannon's comment above that Firefox "natively" supports text-overflow:ellipsis.
It does not, even in FF 2.0.
View this page (http://www.css3.info/preview/text-overflow.html) in Firefox 2.0 and you'll see for yourself.
@Sharepointer : did you even
sam, 02/24/2007 - 00:59 — jide (non vérifié)@Sharepointer : did you even read the article ? this is the point, reproduce the supported property from ie in ff...
Firefox does not support this
ven, 02/23/2007 - 17:39 — Sharepointer (non vérifié)Firefox does not support this - not even in the Minefield Preview release. Is this a CSS standard or just some Microsoft thing?
@Kevin: Firefox seems to
mar, 01/23/2007 - 13:12 — Peter (non vérifié)@Kevin:
Firefox seems to support this natively now and odly so does IE6: http://www.css3.info/preview/text-overflow.html
Where did you get the idea that Firefox would support this? I find no examples of this, and did not manage to get this to work in Firefox...
Really good work. thanks to
jeu, 01/11/2007 - 08:04 — sivarajan (non vérifié)Really good work. thanks to share
Firefox seems to support this
ven, 08/18/2006 - 15:35 — Kevin Cannon (non vérifié)Firefox seems to support this natively now and odly so does IE6:
http://www.css3.info/preview/text-overflow.html
This is a great hack. Thanks
mar, 08/15/2006 - 21:57 — al newkirk (non vérifié)This is a great hack. Thanks for contributing.
Poster un nouveau commentaire