css - -webkit 线夹 : 2 not working in ionic 4

Question

我正在使用 -webkit-line-clamp: 2 来限制 ionic4 应用程序中出现的行数，但它在初始加载时并未按预期出现。相反，当我使用 chrome 中的 inspect 编辑 css 时，它会出现。有什么解决方法可以解决吗？使用的CSS是:

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

Answer 1

我一直面临着完全相同的问题，也在这里提出了一个问题:Ionic 4: -webkit-line-clamp property not applying on inital load

经过几天的尝试找出造成这种情况的原因。我发现在我的例子中，我在我的 HTML 中实现了 ion-slides ( https://ionicframework.com/docs/api/slides )(我面临这个问题的同一个 HTML 文件)，这似乎导致我所有的样式除了 -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 调用返回的数据，这似乎对其余 HTML 元素及其样式有影响(在此当 ion-slides 完全呈现在页面上时，使用 -webkit-line-clamp 规则。

问题似乎是基于时间问题，针对我的特定情况的解决方案是首先获取 ion-slides 内容的数据，然后再获取其余内容。我知道这可能是一个相当模糊的答案，但这个问题似乎是非常极端的情况，我希望这可以帮助您解决这个问题。

更新 2

似乎当我认为我已经解决了问题时，我又开始遇到了。有一个模块可以提供与此处 CSS 规则相同的功能 (https://www.npmjs.com/package/ngx-ellipsis)，但是我注意到在加载许多元素时，它会对性能产生轻微影响。如果您不想面对这种性能影响。您可以限制元素的宽度和高度以限制显示的字符数量