How can I set the maximum width of a BootstrapTable and truncate data that overflows that width?-CodePudding

I have a Bootstrap 5.2 BootstrapTable in an ASP.NET Web Forms project that is currently declared like so:

                        <table 
                            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"  data-checkbox="true"></th>
                                    <th data-field="Description" data-sortable="true" >Description</th>
                                    <th data-field="MemberPrice"  data-formatter="formatter" data-sortable="true">Price</th>
                                    <th data-field="QtyAvailable"  data-sortable="true">Available</th>
                                </tr>
                            </thead>
                        </table>

What I am trying to achieve is this - the data that goes into the Description field can sometimes be very long, and if possible, I'd like to be able to perhaps use CSS to truncate the data so that it is never longer than one line per row. I attempted this CSS, as you can see in the table declaration above:

.set-height {
    max-height: 100px;
    overflow:hidden;
}

.set-width {
    min-width: 100px;
    max-width: 100px;
}

but it doesn't work. If the data in the Description column is long enough to wrap to the next line then it still does. I was also hoping that maybe bootstrapTable had a parameter for this if CSS isn't the answer.

I appreciate everyone's help with this!

CodePudding user response：

You could try setting an ellipsis on that particular column via css like so:

This will "truncate" to just one line only

.ellipses{
    width: 50px; (adjust width to suit your needs)
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

This will "truncate" the content to n number of lines

.ellipses{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; (where 2 is the number of lines)
    -webkit-box-orient: vertical;
}

Additionally if this doesn't work for some reason, try putting the description in a pair of paragraph tags and apply the ellipses classname. Hopefully that solves your problem