CODEWITHSUNDEEP
css
Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Flexbox and text-overflow:ellipsis don't mix?

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>

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

Upvotes: 4

Views: 1013

Answers (2)

Florian Eckerstorfer
Florian Eckerstorfer

Reputation: 1526

You can't put the overflow stuff on the flex box container, you need to put it on the child element.

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

Upvotes: 1

SW4
SW4

Reputation: 71150

According to the W3C spec, this is the anticipated behavior, despite the huge number of discussions about it:

Text Overflow (spec)

This property specifies rendering when inline content overflows its block container element ("the block") in its inline progression direction that has ‘overflow’ other than ‘visible’.

Flex (spec)

Flex containers are not block containers

Upvotes: 2

Related Questions