line-clamp 在 Firefox 和 Safari 浏览器 iphone 的移动视图中不起作用

Question

line-clamp 在 iphone 的 Safari 浏览器和 Firefox 的移动视图中不起作用。

这是我的代码

角度的html：

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

我的 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;
}

传入的数据来自文本编辑器，因此将包含 html 内容，这就是我不得不使用innerHTML 和sainitizeHtml 的原因。 数据可能包含英文或日文字符。

这是它的样子。

您可以在顶部看到，文本与 ... 断开，然后又继续。

它在 moto g5 plus 和其他设备上运行良好，如下所示。 这是我希望所有设备都显示的内容。

Answer 1

Safari/Firefox 增加了一个边距。添加以下css。

.clip_text_2_line > p {
    margin: 0;
}