Flexbox with multiline text ellipsis

Question

I've been using the white-space: no-wrap, text-overflow: ellipsis, and overflow: hidden CSS properties to create ellipsis truncation for multiline text. However, this doesn't work when using flexbox.

When using flex, text-overflow: ellipsis seems to truncate the height of the flex-item to a single line always.

Is it possible to use some combination of flex and css ellipsis truncation for multiline text?

<div className="flex-container">
  <div className="flex-item">
    <p>long multiline text that i would like to truncate</p>
  </div>
</div>

I can get it working with single line truncation. Setting the height manually in conjunction with flex + white-space: nowrap doesn't work.

doesn't look like any of the questions/answers in that thread are specific to flex + multiline css ellipsis — Jon
Because the problem may not be related to flexbox. It may be how you're implementing ellipsis. And ellipsis on multiline text is particularly tricky. — Michael Benjamin
I agree it's tricky. I should have made the question more clear, "Is it possible to use some combination of flex and css ellipsis truncation for multiline text?" I know I can do it without flex + ellipsis :) — Jon
In any case, keep in mind that for text-overflow: ellipsis to work, you must specify white-space: nowrap. This, in effect, makes ellipsis on mult-line text impossible with text-overflow. That's why I referred you to the post above. It provides other methods for ellipsis on multi-line text. — Michael Benjamin

Amit Kulat Amit Kulat · Accepted Answer · 2018-09-22T07:05:27

You can use this code for multiline truncation for ellipsis

.text-block-div {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 43px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

You can use your text inside this div having class .text-block-div for ellipsis effect.

Note: The ellipsis effect requires webkit, which means if someone views it using a browser that does not support webkit then they will not see the ... but the text will still be cut off at the correct point, so this effect still works on all major browsers.

Flexbox with multiline text ellipsis

1 Answers