<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 单元格
上使用此 css
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/en-US/docs/Web/CSS/table-layout
关于html - 如何在表格单元格中使用省略号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53490959/