问题图像
我将这个类应用于h3标签。
.ellipsis-2 {
$lines: 2;
$line-multiple: 1.3;
$font-size: 1em;
display: block;
display: -webkit-box;
max-height: $font-size * $line-multiple * $lines;
line-height: $font-size * $line-multiple;
text-overflow: ellipsis;
overflow: hidden;
word-wrap: break-word;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
}
正如你在图片中看到的,有整行文本和省略号没有显示。
但是当我调整屏幕大小时,省略号可以正常工作。
仅在第一次呈现页面时出现问题。
船吗?
这是我的解决方案:
HTML<mat-expansion-panel>
<mat-expansion-panel-header>
{{ stuff here }}
</mat-expansion-panel-header>
<div class="mat-expansion-panel-content">
<div class="mat-expansion-panel-body">
{{ stuff here }}
</div>
</div>
</mat-expansion-panel>
CSS .mat-expansion-panel-body {
visibility: visible;
}
设置面板内容子元素的可见性属性为visible。
因此,您可以避免在第一次加载时错误渲染。为了解决这个问题,我绞尽脑汁了整整两天。我希望它能节省一些时间。
快一年了,还在回复,因为这可能对某人有所帮助。
如果具有-webkit-line-clamp
的元素在首次呈现时将其可见性设置为隐藏,则可能发生这种情况,无论是直接还是通过继承其父元素之一。这是由于这个webkit的错误:-webkit-line-clamp在隐藏可见性时不被尊重。
作为一种解决方法,如果可能的话,您可以设置display: none
而不是可见性。
如果你的问题是在Angular这样的框架上运行自动修复样式,也许这个解决方案会为你工作:https://medium.com/@gawadnikita angular-6-issue-of-line-clamp-css-not-working-a6b591bda9bf
overflow: hidden;`
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
在-webkit-box-orient: vertical;
之前添加一个/* autoprefixer: ignore next */
,这应该可以工作
在2022年7月为我在Chrome和Safari上使用Angular工作,当此块大小受到父级flex-basis的限制时:
.your-class {
-webkit-line-clamp: 2;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
word-break: break-word;
}
感谢@Leonardo Rick