How to make ellipses vertically aligned?

I have several lines of text, each of them is truncated with ellipses.

.container {     display: block;     border: 1px solid;     width: 200px;  }    .text {    white-space: nowrap;    text-overflow: ellipsis;    overflow: hidden;    font-size: 20px;    text-align: justify;  }

<div class="container">    <p class="text">      This is text1 that has very very very long string.    </p>        <p class="text">      The ellipses of the line is not vertically aligened with the above one.    </p>        <p class="text">      This is text3 that has very very very long string.    </p>        <p class="text">      Lorem ipsum dolor sit amet consectetur adipisicing elit.    </p>  </div>

As you can see from the demo, all the ellipses are not aligned vertically even though the element width is all the same.
How can I make all of them to be aligned vertically?

P.S. Screenshot attached

https://stackoverflow.com/questions/66756014/how-to-make-ellipses-vertically-aligned March 23, 2021 at 09:28AM