css -多行线夹(省略号)不起作用

Question

problem image

.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;
}

正如你在图像中看到的，有整行的文本和没有显示的省略号。

但当我调整屏幕大小时，省略号工作正常。

仅在第一次呈现页面时出现问题。

有什么建议吗？

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;
}

我希望它能节省一些人的时间。

Answer 2

几乎一年前的帖子，仍然回答说这可能会对某人有帮助。

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

作为一种解决办法，如果可能，您可以设置display: none，而不是可见性。

Answer 3

如果你的问题是像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 */，这样就可以了