0

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>
Dasheng
  • 67
  • 6
  • 2
    what do you mean by `does not work`? To me, it seems that it is working perfectly. – tacoshy Dec 30 '22 at 13:31
  • 1
    _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 Dec 30 '22 at 13:33
  • I didn't add `overflow: hidden` on `.left` box it doesn't work – Dasheng Dec 30 '22 at 14:25

1 Answers1

1

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

Geister
  • 46
  • 4