我将这个类应用于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;
}
正如您在图片中看到的那样,文本和省略号都没有显示。
但是当我调整屏幕大小时,省略号工作正常。
问题仅在第一次页面渲染时出现。
任何adivce?
答案 0 :(得分:8)
这是我对此的解决方案:
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 。
因此,您可以避免在第一次加载时出现错误的渲染。 为了解决这个问题,我在墙上撞了两天。 我希望它可以节省一些时间。
答案 1 :(得分:4)
差不多一年的帖子,仍在回答,因为这可能对某人有帮助。
如果具有-webkit-line-clamp
的元素在第一次呈现时将其可见性设置为隐藏,则可能会发生这种情况,无论是直接渲染还是从其父级之一继承。这是由于这个webkit错误:-webkit-line-clamp is not respected when visibility is hidden。
作为一种变通方法,如果可能,您可以设置display: none
而非可见性。