0

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?

Edited by Aeonix

3
Contributors
9
Replies
63
Views
11 Months
Discussion Span
Last Post by Aeonix
0

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.

Edited by Aeonix

0

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.)

0

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.

0

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")

Edited by Aeonix

1

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?`

Edited by rproffitt: Formatting

Votes + Comments
Ooooh yeah!
1

Fiddling with your code, "display: flex;" seems to be what breaks dots. Try other values?`

YEA!!

I just applied float and overflow: hidden fill technique. And dots appeared instantly! Woohoo! Thanks.

Votes + Comments
Be well.
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.