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 :

• 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