当表格单元格的宽度太窄而无法显示时,每当文本被截断时,我希望出现一个省略号。根据CSS Tricks ,它应该如下所示(没什么奇怪的)。
td {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
但是,我无法让它工作。首先我认为这是因为我正在应用 Bootstrap 并且可能有一些样式欺骗我的方法但后来我试图在一个孤立的 fiddle 中重现错误并且 - tada! - 我让它工作了。 (即我让它失败省略,因此得到可重现的错误成功发生。)
fiddle 是here .我错过了什么?!
最佳答案
解决方案一
表格单元格不能很好地处理溢出。您需要设置 max-width
每个 td 上的 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>
方案二
或者只放置 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;
}
<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>
关于html - 无法在不适合表格单元格的长文本上启用椭圆字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48190515/