<div className="container">
<div className="left-area">
<div className="container2">
<table>
<tbody>
<tr>
<td>
48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
</td>
<td>1/1/0001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
我想截断很长的文本。
.container {
margin-top: 20px;
width: 90%;
display: flex;
.left-area {
flex: 1 1 20%;
.container2 {
flex: 1 1 20%;
table {
width: 100%;
}
}
}
}
我试图在 td cell
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
缺少的密钥是table-layout: fixed。
table {
width: 100%;
table-layout: fixed;
}
td {
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<table>
<tbody>
<tr>
<td>
48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
</td>
<td>1/1/0001</td>
</tr>
</tbody>
</table>使用table-layout: auto（默认设置），浏览器使用自动布局算法来检查内容大小以设置单元格（以及列）的宽度。该width和overflow性能在这种情况下会被忽略，省略号不能工作。
使用table-layout: fixed，您可以定义第一行中单元格的宽度（并因此设置表格的列宽）。该width和overflow性能得到尊重在这种情况下，允许省略号功能发挥作用。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句