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

Question

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.

The response is available here: [link]http://stackoverflow.com/questions/12649904/css-text-ellipsis-when-using-variable-width-divs answered by @Blender — mmsilviu, Feb 06 '15 at 09:52

score 35 · Answer 1 · answered Sep 28 '15 at 23:09

35

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;
}

answered Sep 28 '15 at 23:09

b.lyte

6,518
4
40
51

This solution helped me on an another issue where I couldn't use anything else – Alex Pereira Sep 05 '16 at 14:19
1

Just a note that I managed to resolve an issue using this solution, but on the parent element I had to specify `min-length: 0` in the CSS – Martin Sep 11 '20 at 15:55
anything with max-width: 200px is a hack, will look elsewhere – evanjmg Sep 07 '21 at 15:55
@martin I think you mean min-width: 0; – evanjmg Sep 07 '21 at 16:18

score 0 · Answer 2 · answered Mar 19 '22 at 17:01

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>

score -1 · Answer 3 · answered Sep 07 '21 at 16:17

-1

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

answered Sep 07 '21 at 16:17

evanjmg

3,465
1
14
12

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

3 Answers3