6

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.

Improve this question
5
  • possible duplicate: stackoverflow.com/q/33058004/3597276 Commented Aug 16, 2016 at 1:19
  • doesn't look like any of the questions/answers in that thread are specific to flex + multiline css ellipsis Commented Aug 16, 2016 at 15:55
  • 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. Commented Aug 16, 2016 at 15:58
  • 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 :) Commented Aug 16, 2016 at 16:03
  • 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. Commented Aug 16, 2016 at 16:07

3 Answers 3

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Using flexbox is possible, but you need to do some extra things to get

.flex-container { display: flex; flex-direction: column; width: 300px; /* set the width you hope */ } .flex-item { flex: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; /* number of lines */ } 
display: -webkit-box

Adding this container works like a box

-webkit-box-orient: vertical

This way you can add text vertically.

Improve this answer

Comments

0

You need to define some with of the container.

Following is the example.

.flex-container .flex-item { width: 300px; height: 45px; margin: 0 auto; border-bottom: 1px solid #F00; } .flex-container .flex-item p { overflow: hidden; text-overflow: ellipsis; white-space: initial; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
<div class="flex-container"> <div class="flex-item"> <p>long multiline text that i would like to truncate long multiline text that i would like to truncate long multiline text that i would like to truncate long multiline text that i would like to truncate long multiline text that i would like to truncate long multiline text that i would like to truncate</p> </div> </div>

Hope, this helps.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.