Why does text ellipsis not work in flexbox? [duplicate]

Question

I found that the text ellipsis set in .inner_right does not work. After testing, I added overflow: hidden to the .left box, and the ellipsis appeared. how to explain this situation?

.box { height: 100px; width: 100%; display: flex; } .left { flex: 1; display: flex; background-color: blue; /* overflow: hidden; It will not work without adding this */ } .right { width: 200px; background-color: black; } .left .inner_left { width: 100px; background-color: antiquewhite; } .left .inner_right { flex: 1; background-color: aquamarine; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

<div class="box"> <div class="left"> <div class="inner_left"></div> <div class="inner_right"> some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </div> </div> <div class="right"></div> </div>

what do you mean by does not work? To me, it seems that it is working perfectly. — tacoshy
– tacoshy, Commented Dec 30, 2022 at 13:31
and the ellipsis appeared <- This doesn't seems to be a problem. It's just like it is working as expected because its overflow ellipsis. — vee
– vee, Commented Dec 30, 2022 at 13:33
I didn't add overflow: hidden on .left box it doesn't work — Dasheng
– Dasheng, Commented Dec 30, 2022 at 14:25

Geister · Accepted Answer · 2022-12-30 14:30:08Z

1

you can also fix your problem by adding a width value on your .left element

answered Dec 30, 2022 at 14:30

Geister

665 bronze badges

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

Collectives™ on Stack Overflow

Why does text ellipsis not work in flexbox? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related