line-clamp not working in mobile view for firefox and also in safari browser iphone

Question

line-clamp is not working in safari browser for iphone and in mobile view of firefox.

This is my code

html in angular:

<div class="clip_text_2_line" [innerHTML]="viewdata.company_desc | sainitizeHtml"></div>

My Css

.clip_text_2_line{
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: clip!important;
    display: -webkit-box!important;
    line-clamp: 2!important;
    -webkit-line-clamp: 2!important;
    -webkit-box-orient: vertical!important;
}

The incoming data is from text editor, so will contain html content, thats why i had to use innerHTML and sainitizeHtml . The data may contain Engilsh or Japanese characters.

Here is what it looks like.

You can see in the top portion, the text is breaking with ... and then it continues again.

It works fine in moto g5 plus and other devices, as given below. This is what i expect all devices to show.

Answer 1

Safari/Firefox adds a margin. Add the following css.

.clip_text_2_line > p {
    margin: 0;
}