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