html - CSS:停止单元格文本在单元格内换行

Question

JSFiddle:http://jsfiddle.net/wTtsV/7/
在示例中溢出的情况下，文本采用换行符。如何隐藏文本而不是换行？我已经尝试过 overflow: hidden，它不起作用。

Answer 1

我成功地将 table-layout:fixed 添加到表格中。
然后我添加了 overflow:hidden; white-space:nowrap; 到表格单元格。
由于 table-layout:fixed 呈现表格的方式，我不得不调整宽度百分比。

#table{
    display: table;
    width: 100%;
    table-layout:fixed;
}

#t2{
    display: table-cell;
    background-color: green;
    width:80%;
    white-space: nowrap;
    overflow:hidden;
}

Working Example - jsFiddle

编辑:

这是另一种使用 float 元素而不是 display:table 的方法。
容器上设置了一个最小宽度，以防止在窗口很小时发生换行。

警告: 当然，这并不完美，因为您必须为容器指定最小宽度。
如果左右 div 中的文本变化不可预测，则很难确定适合防止换行的最小宽度。

<div id="container">
    <div id="t1">some text</div>
    <div id="t3">some other text</div>
    <div id="t2">aaaaaaaaaa...</div>
</div>

#container {
    min-width:200px;
    width:100% !important;
    width:200px;
}
#t1 {
    float:left;
    background-color: red;
}
#t2 {
    background-color: green;
    white-space:nowrap;
    overflow:hidden;
}
#t3 {
    float:right;
}

http://jsfiddle.net/wTtsV/26/