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

hag*_*210 5 ellipsis linefeed

问题图片

我将此类应用于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;
}
Run Code Online (Sandbox Code Playgroud)

正如您在图像中看到的那样,有整行文本,省略号没有显示。

但是当我调整屏幕大小时,省略号可以正常工作。

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

有没有?

Elo*_*uiz 13

这是我的解决方案:

的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>
Run Code Online (Sandbox Code Playgroud)

的CSS

.mat-expansion-panel-body {
  visibility: visible;
}
Run Code Online (Sandbox Code Playgroud)

将面板内容的子级的可见性属性设置为visible

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

  • 应该是```可见性:可见;```(你在“可见性”这个词中打错了)。 (2认同)

小智 7

将近一岁的帖子,仍在回答,因为这可能会对某人有所帮助。

如果具有的元素-webkit-line-clamp在首次渲染时将其可见性设置为隐藏,则可能会发生这种情况,无论是直接渲染还是通过从其父级继承而来。这是由于以下Webkit错误:隐藏可见性时-webkit-line-clamp不被尊重

作为解决方法,可以设置可见性,而不是可见性display: none