CSS-多行线夹(省略号)不起作用 [英] css - multi line line-clamp (ellipsis) doesn't work

问题描述

问题图片

我将此类应用于h3标签.

I applied this class to h3 tag.

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

如您在图像中看到的，有整行文本，省略号没有显示.

As you saw in image, there is full lines of text and ellipsis didn't show.

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

But when I resize screen, ellipsis works fine.

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

Problem occured only the first time page rendering.

任何地方吗?

推荐答案

这是我对此的解决方案:

This is my solution to this:

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 .

Set visibility property of the panel content's child to visible.

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

So, you can avoid the wrong rendering on the first load. I was hitting my head against the wall for two days in order to solve this. I hope it can save someone some time.

这篇关于CSS-多行线夹(省略号)不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！