html - CSS文本溢出取决于兄弟元素之外的剩余空间

Question

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

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

如果您将鼠标悬停在列表条目上，将显示更多操作元素，如下所示：

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

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

这就是我想出的http://jsfiddle.net/rBthS/265/ 但不知何故我觉得我错过了一些东西。

必须有一条更直的路。你能帮我吗？

Answer 1

在考虑了这一点之后，我正在寻找的更简单的解决方案是http://jsfiddle.net/rBthS/272/

<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>…&lt;/li>
</ul>

Answer 2

您需要为 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:

<?xml version="1.0"?>
<bindings
        xmlns="http://www.mozilla.org/xbl"
        xmlns:xbl="http://www.mozilla.org/xbl"
        xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        >
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

我已经在 FF、Chrome、Opera、Safari 和 IE 上进行了测试，并且可以正常工作。

这里有一整篇关于这个的帖子。