Member Avatar for Aeonix

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
  • 973 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Aeonix

Dani AI

Generated

Short answer: text-overflow only produces the “…” when the same element that contains the text is actually being clipped by its own overflow and has a width constraint. In your thread got a visible fix with float+clipping and correctly spotted that using flex changed the behavior. The reliable fixes are to (A) make the text container itself clip, and (B) when inside a flex layout, let that box shrink.

Concrete patterns to try (single-line truncation):

/* make the flex item allowed to shrink */
.parent-that-is-flex > .text-column {
  min-width: 0;       /* important for flex children */
  flex: 1 1 0;        /* optional: let it take available space */
}

/* apply truncation on the element that holds the raw text */
.summary {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Notes and troubleshooting:

  • If you only set overflow on an ancestor, the ancestor will clip the rendering but the inner element won’t draw the ellipsis — the clipping and text-overflow must be on the same box that contains the inline text.
  • In flex containers the default min-width behavior can prevent shrinking; setting min-width: 0 (or using flex-basis: 0/flex: 1 1 0) on the flex child fixes it.
  • overflow: none is not a valid value — use hidden, auto, or scroll.
  • For multi-line truncation use the -webkit-line-clamp technique (display: -webkit-box; -webkit-line-clamp: N; -webkit-box-orient: vertical; overflow: hidden) with a JS fallback for non‑Blink engines if you need broad support.

Quick debug checklist: inspect computed width/min-width in DevTools, toggle the element’s display (flex/block), and apply clipping to the element that directly contains the text. This will get both the clipping and the ellipsis to behave together.

Recommended Answers

All 9 Replies

Member Avatar for Aeonix

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
Member Avatar for rproffitt

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

Member Avatar for Aeonix

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.

Member Avatar for Aeonix

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
Member Avatar for rproffitt

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 because: Formatting
commented: Ooooh yeah! +4
Member Avatar for Aeonix

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.

commented: Be well. +11
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.