Bootstrap 3 truncate long text inside rows of a table in a responsive way with HTML

To truncate long texts inside rows of a table in a responsive way using Bootstrap 3, we need to combine CSS properties that control text overflow with Bootstrap's responsive grid system. This approach ensures that long text content is properly truncated with ellipsis (...) when it exceeds the available space.

CSS for Text Truncation

Use the following CSS to create responsive text truncation ?

.table td.demo {
    max-width: 177px;
}

.table td.demo span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
}

The max-width property on the table cell sets the maximum width, while the span element handles the actual text truncation using text-overflow: ellipsis and white-space: nowrap.

HTML Implementation

Here's how to implement the HTML structure ?

<div class="container">
    <table class="table table-striped table-responsive">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Product A</td>
                <td class="demo">
                    <span>This is demo text and we have made it a long text for a demo to show text truncation.</span>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Product B</td>
                <td class="demo">
                    <span>Another very long description that will be truncated when it exceeds the maximum width.</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

The output will display a responsive table where long text in the description column is truncated with ellipsis ?

ID | Name      | Description
1  | Product A | This is demo text and we have made it a long text for a demo...
2  | Product B | Another very long description that will be truncated when it...

Conclusion

This method provides an effective way to handle long text content in Bootstrap 3 tables while maintaining responsiveness across different screen sizes.