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

Posted 2023-02-16

【中文标题】css - 多行线夹（省略号）不起作用

【英文标题】：css - multi line line-clamp (ellipsis) doesn't work

【发布时间】：2016-12-23 16:32:10

【问题描述】：

problem image

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

正如您在图片中看到的，有完整的文本行并且没有显示省略号。

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

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

有什么建议吗？

【参考方案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;

将面板内容子项的可见性属性设置为可见。

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

【讨论】：

轰隆隆，这​​比我预期的要容易。谢谢！

应该是visibility: visible;（你在“可见性”这个词中有错字）。

谢谢，@ErnestasRomeika！ ;)

【参考方案2】：

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

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

如果可能，您可以设置display: none，而不是可见性。

【讨论】：

这个答案更准确，即使两者都是正确的。太棒了。