Truncating text from beginning and adding ellipse on multiline paragraph

I am trying to display a paragraph on the webpage, The paragraph will be updated based on user actions ( content on paragraph will change ) I need to limit the content to n number of lines. and if user try to add anything to the paragraph. It should add and truncate the beginning with an ellipse to indicate.

Example with max line 2 - Line number 1, Line2 After adding one more line (line3) , it should be - ...Line2. Line3. Tried the following ways

p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;}

Can't position the ellipse on beginning of text and couldn't find a way to truncate from the beginning. it is limited to 4 lines

    .ellipsis {
    overflow: hidden;
    width: 60px;
    position: relative
    direction: rtl; 
    margin-left: 15px;
    white-space: nowrap;
}   
.ellipsis:after {
    position: absolute;
    left: 0px;
    content: "...";
}

since I am using multiline , can't use nowrap. There are different questions related in stackoverflow. But this seems to be different requirement.

Referred questions - I need an overflow to truncate from the left, with ellipses

Text-overflow ellipsis on left side

Applying an ellipsis to multiline text

from Truncating text from beginning and adding ellipse on multiline paragraph