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

user_5671480 0
Viewed 1385

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.

enter image description here

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.

enter image description here

angular css html
1 Answers

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

.clip_text_2_line > p {
    margin: 0;
}
user_144099410
Related