0

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

4

1 回答 1

2

我通过添加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;
}

工作示例 - 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/

于 2013-09-11T22:09:01.507 回答