14

小提琴:http: //jsfiddle.net/wTtsV/

表格单元格 #t2 的大小不正确:

HTML:

<div id="table">
    <div id="t1">a</div>
    <div id="t2">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div id="t3">a</div>
</div>

CSS:

body{
    margin: 0;
}
#table{
    display: table;
    width: 100%;
}
#t1{
    display: table-cell;
    background-color: red;
}
#t2{
    display: table-cell;
    background-color: green;
}
#t3{
    display: table-cell;
    background-color: blue;
}

预期结果:

在此处输入图像描述

#t2文本太长时如何隐藏?

4

3 回答 3

40

我有完全相同的问题,我得到了一个很好的解决方案。添加表格布局:固定;到您的 id 表:

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

玩得开心!:D

于 2014-01-29T11:24:25.213 回答
9

小提琴:http: //jsfiddle.net/wTtsV/7/

word-break:break-all;
于 2013-09-11T19:50:12.957 回答
2

可能您正在寻找:-

overflow:hidden;

隐藏区域外的文本。

或者你可以尝试使用这个: -

overflow: hidden;
white-space: nowrap; 
text-overflow: ellipsis;
于 2013-09-11T16:52:01.673 回答