JSFiddle: http: //jsfiddle.net/wTtsV/7/
例子中溢出的情况下,文本换行。如何隐藏文本而不是换行?我已经尝试过overflow: hidden
,它不起作用。
问问题
204 次
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;
}
编辑:
这是另一种使用浮动元素而不是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;
}
于 2013-09-11T22:09:01.507 回答