Question

我将这个类应用于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？

Answer 1

这是我对此的解决方案：

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 。

因此，您可以避免在第一次加载时出现错误的渲染。为了解决这个问题，我在墙上撞了两天。我希望它可以节省一些时间。

Answer 2

差不多一年的帖子，仍在回答，因为这可能对某人有帮助。

如果具有-webkit-line-clamp的元素在第一次呈现时将其可见性设置为隐藏，则可能会发生这种情况，无论是直接渲染还是从其父级之一继承。这是由于这个webkit错误：-webkit-line-clamp is not respected when visibility is hidden。

作为一种变通方法，如果可能，您可以设置display: none而非可见性。

css - 多线线钳（省略号）不起作用

2 个答案: