bootstrap中使用table其中某一列元素内容很多导致每一行的高度被内容撑开变得很大如何多每一行设置固定高度超出部分溢出隐藏
您可以使用 CSS 中的 overflow 属性来实现多行设置固定高度并溢出部分隐藏。在每一行的 <td> 元素上添加一个包含内容的 <div> 元素,并为该 <div> 元素设置固定高度和溢出隐藏。以下是一个示例:
<table class="table">
<tr>
<td>
<div class="content">这是一行很长很长的内容</div>
</td>
<td>
<div class="content">这是另一行很长很长的内容</div>
</td>
</tr>
<tr>
<td>
<div class="content">这是一行很长很长的内容</div>
</td>
<td>
<div class="content">这是另一行很长很长的内容</div>
</td>
</tr>
</table>
.content {
height: 50px; /* 设置固定高度 */
overflow: hidden; /* 溢出部分隐藏 */
text-overflow: ellipsis; /* 文字超出部分显示省略号 */
white-space: nowrap; /* 不换行 */
}
上述代码中,每一行的内容被包含在一个 <div class="content"> 元素中。通过设置该元素的高度为固定值,并将溢出部分隐藏,可以实现每一行的固定高度和内容的溢出隐藏效果
原文地址: https://www.cveoy.top/t/topic/iYdj 著作权归作者所有。请勿转载和采集!