html - 两个动态大小并排的容器，左侧容器带有省略号

Question

是否可以在一个容器中放置 2 个并排 float 的元素。右边的元素应该动态调整大小以完全适合内容，左边的元素应该填充容器的剩余空间，并有一个省略号来删除多余的内容。

---------------------------------------------
|[left element with lots of conte...][right]|
---------------------------------------------

我得到的最接近的是:http://jsfiddle.net/xsr71pak/

但是两个表格单元格都使用了表格的 50%。我不需要使用表格，但这是最接近我想要的结果。有人可以帮忙吗？

Answer 1

几乎与您拥有的相同，但不使用表格，只使用 div。正确的 float 对象将在 HTML 中排在第一位，以使 float 对象正确排列。

<div class="container">
    <div class="right">Something</div>
    <div class="text-ellipsis">This is really long text, long test, long test, long test, long test, long test long text, long test, long test, long test, long test, long test long text, long test, long test, long test, long test, long test</div>
</div>

fiddle :http://jsfiddle.net/xsr71pak/1/