In my case, I found that white-space: break-spaces;
helped. When I have some time I need to read https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace and https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp more carefully.
Here's the full set of styles applied to a container (any element), with text content, to make line clamping possible:
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: break-spaces; /* added this */
padding-right: 50px; /* just to demonstrate, but my container had some arbitrary right padding, which caused some content to just be clipped without applying the ellipsis line clamping. This usually happened to content that could fit in one line, padding included. */
One more thing if it helps people stumbling into this - this article on CSS tricks outlines all the various ways to achieve clamping apart from this! https://css-tricks.com/line-clampin/ Some of them may circumvent this issue, I'm unsure, but worth trying depending on your use-case.