Summary: Use “table-layout:fixed”
Today, I stumbled across an issue whereby the title of an item within a web part didn’t maintain it’s ellipsis. Instead, the web part zone container was expanded to the full width of the title inside, therefore, overflowing onto other aspects of the page.
It’s worth noting here that the solution is responsive, so adding a max-width, or fixed width wasn’t an option.
A quick look in the developer tools I found that the responsive column was being maintained, but the web part was bleeding out.
I noticed that the “.ms-webpart-zone” container set set to “display:table”. As a result, the table’s width was being dictated by the content within.
Now, initially, I changed the “.ms-webpart-zone” to display block, which worked fantastically. However, a little side effect of this resulted in not being able to add web parts in edit mode (Just a small issue…)
What worked was ensuring that “.ms-webpart-zone” maintained some form of table attribute. By adding “table-layout:fixed” ensured that SharePoint’s default styling of “table” was maintained and not overwritten with “block” and that the table width wasn’t dictated by the content within it.