我在 ASP.NET Web 表單專案中有一個 Bootstrap 5.2 BootstrapTable，當前宣告如下：
<table class="display table table-bordered table-striped w-100 tables"
data-click-to-select="true" data-unique-id="InventoryItemID"
data-pagination="true" data-sortable="true" data-page-size="5"
data-single-select="true" data-maintain-selected="true"
data-id-field="InventoryItemID" id="items" name="items">
<thead>
<tr>
<th data-field="state" class="set-height" data-checkbox="true"></th>
<th data-field="Description" data-sortable="true" class="set-height set-width text-start">Description</th>
<th data-field="MemberPrice" class="text-end set-height" data-formatter="formatter" data-sortable="true">Price</th>
<th data-field="QtyAvailable" class="text-end set-height" data-sortable="true">Available</th>
</tr>
</thead>
</table>
我想要實作的是 - 進入描述欄位的資料有時可能很長，如果可能的話，我希望能夠使用 CSS 截斷資料，使其永遠不會超過一個每行一行。我嘗試了這個 CSS，你可以在上面的表宣告中看到：
.set-height {
max-height: 100px;
overflow:hidden;
}
.set-width {
min-width: 100px;
max-width: 100px;
}
但它不起作用。如果描述列中的資料足夠長，可以換行到下一行，那么它仍然可以。如果 CSS 不是答案，我也希望 bootstrapTable 有一個引數。
我感謝大家對此的幫助！
uj5u.com熱心網友回復：
您可以嘗試通過 css 在該特定列上設定省略號，如下所示：
這將“截斷”為僅一行
.ellipses{
width: 50px; (adjust width to suit your needs)
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
這會將內容“截斷”為 n 行
.ellipses{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; (where 2 is the number of lines)
-webkit-box-orient: vertical;
}
此外，如果由于某種原因這不起作用，請嘗試將描述放在一對段落標簽中并應用省略號類名。希望能解決你的問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/528801.html