当表格单元格的宽度太窄而无法显示时,我希望在文本被切断时出现省略号。根据{{3}},它应该看起来如下(在那里没有什么意外)。
td {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
但是,我无法使其发挥作用。首先我认为这是因为我应用Bootstrap并且可能有一些造型欺骗我的方法然后我试图在一个孤立的小提琴重现错误 - tada! - 我搞定了。 (即我得到了失败的椭圆,因此得到了可重复的错误成功发生。)
小提琴是CSS Tricks。我错过了什么?!
答案 0 :(得分:0)
解决方案1
表格细胞不能很好地处理溢出。您需要在每个td上设置 max-width
CSS属性才能使溢出生效。尝试使用 max-width
代替 width
body {
font: 13px Verdana;
}
td {
background-color: pink;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50px;
}

<table class="table">
<thead>
<th>Name</th>
<th>Alias</th>
<th>Location</th>
<th>Updated</th>
<th>Actions</th>
</thead>
<tbody>
<tr>
<td>Ali Baba & Co.</td>
<td>Boys 'n da hood</td>
<td>Somewhere over the rainbow</td>
<td>February 30th</td>
<td>Do stuff!</td>
</tr>
</tbody>
</table>
&#13;
解决方案2
或者只需将 td
内容放在 <span>
中,然后应用css
body {
font: 13px Verdana;
}
span {
background-color: pink;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: block;
}
.table {
width: 100%;
table-layout:fixed;
}
&#13;
<table class="table">
<thead>
<th>Name</th>
<th>Alias</th>
<th>Location</th>
<th>Updated</th>
<th>Actions</th>
</thead>
<tbody>
<tr>
<td><span>Ali Baba & Co.</span></td>
<td><span>Boys 'n da hood</span></td>
<td><span>Somewhere over the rainbow</span></td>
<td><span>February 30th</span></td>
<td><span>Do stuff!</span></td>
</tr>
</tbody>
</table>
&#13;