线夹在 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;
}