How to force Firefox to correctly truncate text when there is floating content next to it?

Question

On all browsers but Firefox, the following code produces the result shown below:

div
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div > span
{
  float: right;
  background: rgba(255, 0, 0, 0.5);
}

<div>
  <span>float!</span>
  sukhudfh slduifh dsukf hsludk ksndfgkv nfdkgjnsdk:ndkf n,sldk n:dknv lx:,vc ls:xjlf ,msldkj*nx vo:dkng v:kxnc vl:lj xf, c !lskwf,moslkdwhxfn vmosdxwjxf,vù!sdlxwjf,ù!sldwjlf ,ùpsold v,ùpdlf, w!
</div>

But on Firefox (53) you get:

How do I get Firefox to behave just like the other browsers?

Possible duplicate of [how to obtain Text-overflow : ellipsis type style (...) in mozilla](https://stackoverflow.com/questions/4625329/how-to-obtain-text-overflow-ellipsis-type-style-in-mozilla) — Brett DeWoody, Jul 12 '17 at 10:42

score 2 · Accepted Answer · answered Jul 12 '17 at 10:42

Just Take another element with text

div
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div > span
{
  float: right;
  background: rgba(255, 0, 0, 0.5);
}

<div>
  <span>float!</span>
  <div>sukhudfh slduifh dsukf hsludk ksndfgkv nfdkgjnsdk:ndkf n,sldk n:dknv lx:,vc ls:xjlf ,msldkj*nx vo:dkng v:kxnc vl:lj xf, c !lskwf,moslkdwhxfn vmosdxwjxf,vù!sdlxwjf,ù!sldwjlf ,ùpsold v,ùpdlf, w!</div>
</div>

How to force Firefox to correctly truncate text when there is floating content next to it?

1 Answers1