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

user_808699 0
Viewed 298

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.

flexbox css
1 Answers

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>

user_95245410
Related