What is replacement of box-orient with the new flexbox?

Question

As per the Google guy's comment here

box-orient (and its webkit variant) is a non-standard property left over from an old version of the flexbox spec. Any bugs with it are probably related to that.

So in the below code I want to remove the following styles display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

and replace them with new flexbox specs, how can I do that the desired result is to clamp lines at 2 lines length as in the demo (text-overflow to ellipsis)

<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="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>

Note: The reason for this change is that this style doesn't work when the html element is hidden at default as mentioned in this Github issue. Working Angular Demo here

Answer 1

You can define a line-height on the inner div, and then set the max-height to twice the line height:

line-height: 1.2em
max-height: 2.4em

Per MDN, the default value of normal for line-height is around 1.2em but changes depending on the font.

Note: This will not allow the text to ellipsis