CSS: display: flex and text ellipsis on the same element

Question

I'm trying to get an element with display: flex to work with text-overflow: ellipsis so overflown text is truncated with .... The width of the element is defined via its flex-basis from a parent flexbox, see here:

.parent { display: flex; min-width: 0; } .child { display: flex; background: yellow; flex: 0 0 5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

<div class="parent"> <div class="child"> abcabcabcabcabcabcabc </div> </div>

I've search similar answers but none seem to cover this exact case. I do not want to introduce any additional elements and I want to keep the display: flex on the element because I need it for vertical centering.

developer.mozilla.org/en-US/docs/Web/CSS/text-overflow: “Applies to:block container elements” — misorude
– misorude, Commented Nov 2, 2018 at 10:14

SystemGlitch · Accepted Answer · 2018-11-02 10:16:49Z

4

As @misorude said, text-overflow applies to block container elements.

Try the following:

.parent { display: flex; min-width: 0; } .child { display: block; background: yellow; flex: 0 0 5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

<div class="parent"> <div class="child"> abcabcabcabcabcabcabc </div> </div>

answered Nov 2, 2018 at 10:16

SystemGlitch

2,29215 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

silverwind Over a year ago

Unfortunately, this won't work in my case as I'd like to keep display: flex on the child so I can use align-items: center to vertically align other content like SVGs in the child.

SystemGlitch Over a year ago

Then you either have to add another element inside child to contain the text, or center child inside parent

silverwind Over a year ago

Guess adding a wrapper inside child is the only option here. child is already centered in parent, but I specifically need to center the child content as well.

Temani Afif Over a year ago

you don't need to add display:block .. a flex item is already a block level element

Collectives™ on Stack Overflow

CSS: display: flex and text ellipsis on the same element

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related