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

Question

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 无法使用

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

Answer 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 并不总是添加省略号，但有时会添加。

Answer 3

2023 年 10 月更新

看来他们终于在 Safari 17 中修复了这个问题：https://developer.apple.com/documentation/safari-release-notes/safari-17-release-notes

修复了 -webkit-line-clamp 重叠块，即使溢出：隐藏，当混合

<span>

和

<div>

时。 (108116069)