When it comes to limiting text to a specific width, using white-space:nowrap is usually the go-to solution. However, I am facing a unique challenge where I need to make sure my header text fits within a specific width.
I initially tried adding individual styles to each <th> element to force them onto two lines, but that approach doesn't seem sustainable in the long run.
For example:
<table class="table table-hover table-sm text-center">
<thead>
<tr>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th style="min-width: 90px">Lorem ipsum dolor sit amet</th>
</tr>
</thead>
</table>
Another attempt was to insert line breaks within the text itself, but manually going through multiple files for this purpose didn't seem ideal either.
<th>Lorem ipsum <br /> dolor sit amet</th>
I also experimented with applying an external stylesheet to enforce a minimum width for all elements, but this caused significant spacing issues between table headers.
I'm curious to know if there is a more efficient method to achieve this outcome.