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

编辑：

这是使用浮动元素而不是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/

CSS：阻止单元格文本在单元格中包装

1 个答案:

编辑：