In my ASP.NET Web Forms project, I am utilizing Bootstrap 5.2 for a BootstrapTable, which is currently defined as follows:
<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>
I am attempting to ensure that the Description field displays only one line of text per row by using CSS to truncate longer content. Here is the CSS code I have tried:
.set-height {
max-height: 100px;
overflow:hidden;
}
.set-width {
min-width: 100px;
max-width: 100px;
}
However, this approach does not seem to be achieving the desired result. If the Description column's data exceeds one line, it still wraps to the next line. I am wondering if there is a specific parameter in bootstrapTable that can control this behavior, as an alternative to using CSS.
Your assistance on resolving this issue would be greatly appreciated!