线夹在 Firefox 和 Safari 浏览器 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;
}