CODEWITHSUNDEEP
htmlcssflexbox
takeradi
takeradi

Reputation: 3861

text-overflow: ellipsis not working with inline-flex

Why does text-overflow: ellipsis not work when I use display: inline-flex or display: flex? My requirement is that I have to use a flexbox.

.test {
  display: inline-flex;
  line-height: 24px;
  width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background: cyan;
}
<label class="test">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, at error rerum ab facere cupiditate veniam incidunt modi temporibus explicabo earum molestiae minima facilis a excepturi laborum similique dolore.
    </label>

Upvotes: 2

Views: 2211

Answers (2)

Syden
Syden

Reputation: 8625

Try setting the inline-flex on a parent div, like this:

.test {
  line-height: 24px;
  width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background: cyan;
}

.parent-div {
  display: inline-flex;
}
<div class="parent-div">
  <label class="test">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, at error rerum ab facere cupiditate veniam incidunt modi temporibus explicabo earum molestiae minima facilis a excepturi laborum similique dolore.
  </label>
</div>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371261

It would appear that text-overflow: ellipsis doesn't work on anonymous flex items. Wrap the text in a span, and apply the ellipsis there.

.test {
  display: inline-flex;
  line-height: 24px;
  width: 200px;
  white-space: nowrap;
  background: cyan;
}

span {
  text-overflow: ellipsis;
  overflow: hidden;
}
<label class="test">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque,
            at error rerum ab facere cupiditate veniam incidunt modi temporibus
            explicabo earum minima facilis a excepturi laborum similique</span>
</label>

Upvotes: 2

Related Questions