CODEWITHSUNDEEP
htmlcss
Erma
Erma

Reputation: 387

CSS: display: inline-flex and text-overflow: ellipsis not working togethier

I have a span. I need both the below mentioned styles. But along with display: inline-flex, text-overflow: ellipsis is not working.

.ed-span{
   display: inline-flex!important;
   text-overflow: ellipsis;
 }

when I change inline-flex to inline-block it is working. But I need inline-flex.

How can i make it work?

Please help, Thanks.

Upvotes: 28

Views: 26093

Answers (3)

Mahdi Cheraghi
Mahdi Cheraghi

Reputation: 156

Just use display: inline-grid in parent-div.

.parent-div {
  display: inline-grid;
  background: cyan;
}

span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<label class="parent-div">
      <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: 0

evanjmg
evanjmg

Reputation: 3791

Use min-width: 0 on the display: flex element See full article here: https://css-tricks.com/flexbox-truncated-text/

Upvotes: 0

b.lyte
b.lyte

Reputation: 6747

I ran into the same issue. What you have to do is put the text within another div which has the overflow style. The inline-flex does not support text-overflow as seen here: https://bugzilla.mozilla.org/show_bug.cgi?id=912434

This should work:

<div class="parent-div">
    <div class="text-div">
    Ellipsis' are cool.
    </div>
</div>

Where the text-div style is as follows:

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

And parent-div:

.parent-div {
    display: inline-flex;
}

Upvotes: 40

Related Questions