CSS line-clamp 在 Safari 内部块级元素上不起作用答案

【问题标题】：CSS line-clamp does not work in Safari on inner block level elementsCSS line-clamp 在 Safari 内部块级元素上不起作用
【发布时间】：2022-01-13 10:20:47
【问题描述】：

CSS

.line-clamp{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden; 
}

HTML

<div class="line-clamp">
  <div>Line 1</div>
  <div>Line 2</div>
  <div>Line 3</div>
  <div>Line 4</div>
  <div>Line 5</div>
</div>

Chrome 运行良好

Safari 不工作

【问题讨论】：

这个问题和stackoverflow.com/questions/64271205/…一样。很遗憾，此链接中没有答案。
不一样。问题是 Safari 不隐藏多个溢出块内容。您提到的问题在隐藏溢出内容方面效果很好。

标签： html css safari

【解决方案1】：

最新版本的 safari 似乎在以下方面存在错误 overflow: hidden.

如果您能够减少代码中使用的 div 的数量，线夹仍然适用于 safari 中的单个 div。

<div class="line-clamp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

或者，这个 css 会使溢出工作，但不添加省略号

.line-clamp{
  overflow: hidden;
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  height: 4.5rem;
}

【讨论】：

感谢您的回复！正如您所写，safari 不会添加省略号，但 Chrome 会在将显示属性设置为 -webkit-box 时添加。
是的，这看起来是最好的方法。关于可访问性要记住的一件事；在这两种方法中，可见隐藏的元素仍将位于 DOM 中，因此屏幕阅读器仍将能够读取它们。

【解决方案2】：

正如 J Davies 所写，Safari 不会在内部块元素中隐藏溢出内容。因此，J Davies 写道，只需添加高度并调整字体大小和行高属性。

CSS

.line-clamp{
  display: -webkit-box; // Notice display: block doesn't add ellipsis in Chrome
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden; 
  // added below
  font-size: 1rem;
  line-height: 1.5rem;
  height: 4.5rem;
}

Chrome 仍然可以正常工作

Safari 并不总是添加省略号，但有时会添加。

【讨论】：