線夾在 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;
}