Html CSS文本溢出取决于同级元素之外的剩余空间

我正在尝试设计一个列表条目的样式，它包含左侧的文本和右侧的动作元素。 如果文本长度较长，则可用空格文本应替换为省略号

 - This is a list entry with text that is… [>]

如果将鼠标悬停在列表项上，将显示更多动作元素，如下所示：

 - This is a list entry with text tha… [x] [>]

我更喜欢只使用CSS的解决方案，而不依赖于JS

这就是我想到的 但不知怎的，我觉得我错过了什么

---

一定有一条更直的路。您能帮忙吗？

您需要为FF添加一个xml。 这是CSS代码：

white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -moz-binding: url('path_to_xml/ellipsis.xml#ellipsis');

XML:

我在FF、Chrome、Opera、Safari和IE上进行了测试，效果良好

---

关于这一点有一整篇文章。

您需要为FF添加一个xml。 这是CSS代码：

white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -moz-binding: url('path_to_xml/ellipsis.xml#ellipsis');

XML:

我在FF、Chrome、Opera、Safari和IE上进行了测试，效果良好

---

有一整篇文章都是关于这一点的。

在仔细思考之后，我想要的更简单的解决方案就是这个

富吧
更多的文字，然后这可以处理…

仔细考虑后，我想要的更简单的解决方案是

富吧
更多的文字，然后这可以处理…

我认为Firefox的代码有一些问题：你在那里看到了吗？没有，只是在chrome中测试。对不起，我可能已经提到了……现在在FF中工作，我认为Firefox在代码方面有一些问题：你在那里看到了吗？没有，只是在chrome中测试。抱歉，本可以提到……现在在FF中工作，这篇文章以以下免责声明开头：“当2011年上半年Firefox 4发布时，这个技巧已经过时”我不确定，但我觉得这并不能回答问题。这篇文章以以下免责声明开头：“当Firefox4在2011年上半年发布时，这个技巧就过时了”我不确定，但我觉得这并不能回答问题。

<ul>
  <li>
    <div style="float: right;">Foo Bar</div>
    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
      More text then this can handle …
    </div>
  </li>
  <li>…</li>
</ul>