当旁边有浮动内容时，如何强制Firefox正确截断文本？

Question

在除Firefox之外的所有浏览器上，以下代码生成如下所示的结果：

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>

但是在Firefox（53）上你会得到：

如何使Firefox的行为与其他浏览器一样？

Answer 1

使用另一个带文字的元素

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;