-webkit-line-clamp：2 在離子 4 中不工作

Question

我正在使用-webkit-line-clamp: 2來限制 ionic4 應用程序中出現的行數，但它在初始加載時沒有按預期出現。 相反，當我在 chrome 中使用檢查編輯 css 時，它會出現。 有什么辦法可以解決嗎？ 使用的 css 是：

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;

Answer 1

 p { width: 300px;important: display; -webkit-box:important; overflow: hidden;important: text-overflow; ellipsis:important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important }

 <p>   In this example the <code>-webkit-line-clamp</code> lorem ipsum lorem ipsum <code>3</code>, which means the text is clamped after three lines.   An ellipsis will be shown at the point where the text is clamped. </p>

• 如果您想多次使用它，請制作class ，如果您想使用一次，請制作id
• 然后使用'!important'在您的根 css 文件（全局或變量）中實現class or id
• 它肯定會為你工作

Answer 2

我一直面臨着完全相同的問題，並在這里提出了一個問題： Ionic 4: -webkit-line-clamp property not apply on inital load

經過幾天試圖找出造成這種情況的原因。 我發現在我的情況下，我在我的 HTML 中實現了ion-slides （ https://ionicframework.com/docs/api/slides ）（同樣的 Z4C4AD5FCA2E7A3F74ZDBB1CED00381AA4 似乎是我面臨的所有文件的問題）我的 styles 除了來自-webkit-line-clamp: 2之外仍然適用

當我刪除該文件中的所有ion-slides實例時，我的-webkit-line-clamp: 2 css 規則在初始加載時正確應用。 我仍在試圖弄清楚如何同時擁有ion-slides和-webkit-line-clamp: 2但是如果我最終找到合適的解決方案，我會更新這個答案。

更新

在我的特殊情況下。 我有ion-slides和 *ngFor 循環來根據返回的數據創建多個ion-slide 。 我注意到我將最后渲染ion-slides ，因為它取決於從 HTTP 調用返回的數據，這似乎對 Z4C4AD5FCA2E7A3F74DBB1CED00381AA4 的-webkit-line-clamp有影響-webkit-line-clamp規則）當ion-slides完全呈現在頁面上時。

問題似乎是基於時間問題，我的特殊情況的解決方案是首先獲取ion-slides內容的數據，然后再獲取 rest。 我知道這可能是一個相當模糊的答案，但這個問題似乎非常極端，我希望這可以幫助你解決這個問題。

更新 2

似乎當我認為我已經解決了問題時，我又開始遇到了。 有一個模塊可以提供與此處的 CSS 規則相同的功能（ https://www.npmjs.com/package/ngx-ellipsis ）但是我注意到在加載許多元素時，它可能會對性能產生輕微影響。 如果您不想面對這種性能影響。 您可以限制元素的寬度和高度以限制顯示的字符數量

Answer 3

對於 ionic 4，您必須將style="-webkit-box-orient: vertical"添加到 html 元素例如：

<p style="-webkit-box-orient: vertical">
In this example the <code>-webkit-line-clamp</code> lorem ipsum lorem ipsum <code>3</code>, which means the text is clamped after three lines.
  An ellipsis will be shown at the point where the text is clamped.
</p>

p {
 width: 300px;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

Answer 4

記得檢查white-space ，特別是如果你在<ion-label>里面：

 p { width: 300px;important: display; -webkit-box:important; overflow: hidden;important: text-overflow; ellipsis:important: -webkit-box-orient; vertical !important; -webkit-line-clamp: 3 !important white-space: normal; }