Is what I have. Text of div.summary goes outside of it's planned content. Even when told not to. The only solution to this is overflow: none; in "super-parent" div.mail. But it ignores: text-overflow: ellipsis;.
How can I limit content of this div (div.summary) and have text-overflow: ellipsis working at the same time, by changing CSS?
On top of it, that's just part of the problem, it should still limit content of the item regardless whether it's direct cut-off or ending on "...". And it doesn't do that, which I still don't understand why.
I rechecked and it noted support for Firefox versions 49 to 53. My concern is that only iE11 was listed and too many use IE and lower versions so this is going to be hit and miss.
Are we looking at the same document? I see two sections, one has "Not supported" across every and all versions (while it does support), and other has "Supported" across every and all versions. Not only 49 to 53.
If "Firefox" is marked as one that isn't supported, while it does support it. And Opera and Chrome don't require prefix like CanIUse claims. I wouldn't be surprized that IE10+ is also supported.
What I don't understand is you solved this, (read your code.)
If I set overflow: none; on itself, it doesn't seem to be affected.
The only way to handle overflow of this item, in this situation is to put overflow: none; on parent's parent. But then text-overflow: ellipsis; (either on parent's parent, parent or element iself) doesn't work. It doesn't put triple dot at the end.
Oh and I know how properties and functions of overflow, thanks :)
(it's weird how this entire thread devolves to "i miss three dots at the end")