The table-layout property was the key to getting the text to truncate properly. This property determines the algorithm to be used to layout table rows, cells, and columns. The relevant values are auto, fixed, or inherit
auto is the default value. The result will typically be determined by the content.
fixed will ignore the content and use the table’s width, specified column width, and border & cell spacing values to determine the layout. Column values used are based on widths defined on columns or cells in the first row of the table.
inherit indicates the value is the same from the table-layout value of the selected element’s parent.
For fixed to have any effect, the table’s width has to be set to something other than auto.
Use
In practice, the table-layout property set to fixed could be used for aesthetic, like ensuring even column width regardless of content. Using fixed is also faster because the browser doesn’t have to analyze content prior to rendering the table layout.
With that in mind, we can apply other properties to accomplish text truncating in table cells. We can combine the above knowledge with typical text-overflow properties, and, as a result, we can get the text to truncate quite nicely.
See the Pen Handling Text Overflow in Table Cells by Nate Northway (@the_Northway) on CodePen.
Side Benefits
In addition to being quick, this solution is also responsive. Go ahead, change the viewport size in the embedded pen above.
Other Resources
Because you’re probably using dynamic text, you might have to deal with no text at all, as opposed to too much text. To handle that as equally gracefully, combining the table-layout property with the empty-cells property would be a great call. I talk about the empty-cells property briefly in this post. CSS-Tricks has a great article showing the differences in table-layout properties. The MDN article exists, but I think it’s a little lacking and doesn’t do as good a job as the CSS-Tricks article.