我有下表
<table>
<tr>
<td>Long name name name name name name</td>
</tr>
<tr>
<td>Some shorter</td>
</tr>
</table>
和我的 CSS
table {
border: 1px solid black;
}
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
我需要在我的桌子上放省略號，這就是為什么我 max-width: 100px;一起使用white-space: nowrap;
但這里的問題是我需要我的 td 來修復
td {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
如果我這樣做比我的 td 具有固定寬度但我失去了省略號。有什么辦法可以做到這一點嗎？
uj5u.com熱心網友回復：
利用table-layout:fixed;
table {
border: 1px solid black;
width:100%;
table-layout:fixed;
}
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} <table>
<tr>
<td>Long name name name name name name Long name name name name name name Long name name name name name name Long name name name name name name Long name name name name name name</td>
</tr>
<tr>
<td>Some shorter</td>
</tr>
</table>uj5u.com熱心網友回復：
您可以使用-webkit-line-clamp. 您可以在此處閱讀有關先決條件的更多資訊
table {
border: 1px solid black;
}
td {
max-width: 100px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}<table>
<tr>
<td>Long name name name name name name</td>
</tr>
<tr>
<td>Some shorter</td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/422391.html
標籤：
上一篇：在javascript中，如何在一行中創建具有許多屬性的元素createElement()？[復制]
下一篇：將垂直選單更改為水平CSS