https://jsfiddle.net/n0260s1L/3/
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?
Here's the thing. http://caniuse.com/#search=ellipsis tells me that this may not work except on the listed browsers.
So IMO, nothing broken, just wasn't supposed to work on a lot of browsers.
Can I Use also claims that Firefox doesn't support it, but it does: https://jsfiddle.net/tt9psxz3/1/
And since Dani says it, it's pretty believable that it must be widely supported: https://www.daniweb.com/programming/web-development/threads/506676/wrap-text-and-end-it-with#post2212071
I believe that there must be a mistake on CanIUse, since it does work and doesn't require prefix for Opera and Chrome as CanIUse states.
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.
Can I Use also claims that Firefox doesn't support it,
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.
What I don't understand is you solved this, (read your code.)
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.)
It's not quite what I wanted. Since Firefox, Chrome and Opera work on this: https://jsfiddle.net/tt9psxz3/1/
I really wanted it to work on this: https://jsfiddle.net/n0260s1L/3/
You know the wrap and triple dot at the end.
Remember "Only works in combination with the mentioned overflow value." So if you don't set overflow, then it's working as expected.
I missed that connection above and went checking on support. So if you don't set overflow, it will.
More at https://css-tricks.com/almanac/properties/o/overflow/
Exactly not in this situation.
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")
At least we didn't ask how to use the three seashells.
Fiddling with your code, "display: flex;" seems to be what breaks dots. Try other values?`
Fiddling with your code, "display: flex;" seems to be what breaks dots. Try other values?`
I just applied float and overflow: hidden fill technique. And dots appeared instantly! Woohoo! Thanks.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.