How to give minimum 2 lines of space to overflowing text?

Question

Expected output should be at least 2 lines tall

I want to retain the text-overflow: ellipsis property

<div style="min-height: 128px;
    border-radius: 7px;
    box-shadow: 0 2px 4px 0 rgba(210, 210, 210, 0.5);
    border: solid 0.3px rgba(26, 25, 25, 0.15);
    background-color: #ffffff;
    width: 268px;
    margin-bottom: 13px;">


  <div style="  width: 100px;     font-family: Roboto;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 5.6px;
    height: 49px;">
    Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make
    this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’?

  </div>

</div>

I think either `padding-bottom: 2em` or `min-height: 2em` would help here. Not sure I understand the question though. — Seph Reed, Aug 20 '19 at 21:53
If you run the snippet and compare it to the image above you will see the difference — dota2pro, Aug 20 '19 at 21:54
At. So, max 2 lines? Probably `max-height: 2em` is where it's at then. — Seph Reed, Aug 20 '19 at 21:55
I have removed my answer. A quick google search gave me this answer: https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text — Robin Baby, Aug 20 '19 at 22:29

dota2pro · Accepted Answer · 2019-08-21T14:57:35.993

Got the best way using -webkit-line-clamp (doesn't work in IE) from this answer

<div style="min-height: 128px;
    border-radius: 7px;
    box-shadow: 0 2px 4px 0 rgba(210, 210, 210, 0.5);
    border: solid 0.3px rgba(26, 25, 25, 0.15);
    background-color: #ffffff;
    width: 268px;
    margin-bottom: 13px;">


  <div style="       font-family: Roboto;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 5.6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;">
    Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make
    this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’?

  </div>

</div>

How to give minimum 2 lines of space to overflowing text?

1 Answers1