时间戳

首页 > 解决方案 > -webkit-line-clamp：2 在离子 4 中不工作

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

问题描述

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

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

标签： cssionic4

解决方案

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

经过几天试图找出造成这种情况的原因。我发现在我的情况下，我在我的 HTML（我面临这个问题的同一个 HTML 文件）中实现了ion-slides（https://ionicframework.com/docs/api/slides），这似乎导致我的所有样式除了从-webkit-line-clamp: 2

ion-slides当我删除该文件中的所有实例时，我的-webkit-line-clamp: 2css 规则会在初始加载时正确应用。我仍在试图弄清楚如何才能同时拥有两者ion-slides，-webkit-line-clamp: 2但是如果我最终找到合适的解决方案，我将更新此答案。

更新

在我的特殊情况下。我有ion-slides一个 *ngFor 循环来ion-slide根据返回的数据创建多个。我注意到我将渲染最后一个，因为它依赖于从 HTTP 调用返回的数据，当完全渲染时ion-slides，这似乎对其余的 HTML 元素及其样式（在本例中为-webkit-line-clamp规则）产生了影响ion-slides这页纸。

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

更新 2

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

推荐阅读