我已经尝试了几件事(并在这里环顾四周),迄今没有任何工作.所以我要问.
我想要的是：
我有以下简单的HTML：
<table>
<tr>
<td class="small">First column with text</td>
<td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
<td class="small">Small column</td>
</tr>
</table>
表本身应该是父容器的100％宽度.
我希望第一列和最后一列(.small)与它们一样大,所以内容可以适应它,而不需要换行(几乎是什么空格：nowrap).中间列(.extend)应该占用空间的其余部分(因此表将保持在其父容器的100％宽度内),并且.extend中的文本应在其需要中断到秒线之前被省略.
我在http://jsfiddle.net/3bumk/准备了一个小提琴
有了这些背景颜色,我会期待像：
有没有解决方案？
我得到的
我的问题是,如果我可以使文本保留在一行(没有换行符),表将始终溢出其父容器宽度(并使其可滚动),然后才有意思省略文本中的文本中间栏.
什么是没有解决方案(我经常发现)：
将第一列和第三列设置为(百分比或像素)的“固定”,因为内容的长度会不同.可以根据需要添加任意数量的div或span(或者摆脱所有表格,我先用display和table,但是我没有找到一个可行的解决方案).
PS：如果你可以编辑小提琴到一个工作示例,如果你知道一个:-)这将是非常好的
编辑我可以自由使用div而不是表！
解决方法
这是一个使用div而不是表的答案：
DEMO
HTML
<div class="container">
<div class="fnl first">First Baby</div>
<div class="fnl last">Last Guy</div>
<div class="adjust">I will adjust between both of you guys</div>
</div>
CSS
.container{
width: 300px;
}
.first{
float:left;
background: red;
}
.last{
float:right;
background: orange;
}
.adjust{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
