Flexbox and text overflow: ellipses don't mix?

Question

My code is very simple:

div {
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#flex {
  display: flex;
}

<div id="not-flex">
  <span>I am text. I should overflow. When I overflow, I should have an ellipsis at the end.</span>
</div>

<div id="flex">
  <span>I am text. I should overflow. When I overflow, I should have an ellipsis at the end.</span>
</div>

Run codeHide result

Why does flexbox not allow mine text-overflow:ellipsis, and what can I do to make it work?

Answer 1

You cannot put overflow material in a container of a flexible container, you need to put it in a child.

.box {
  display: flex;
  width: 300px;
}
.content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="box">
    <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita magnam dolore, ipsam architecto, amet iusto. Doloremque minima inventore eius reiciendis corporis officiis impedit iure vitae voluptates, iste nesciunt, labore natus!</span>
</div>

Run codeHide result

Answer 2

According to the W3C specification, this is expected behavior despite a huge discussion number about it:

Text Overflow ( spec )

, ( "" ) ", " .

Flex ()

Flex