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

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

CSS line-clamp does not work in Safari on inner block level elements

html

css

safari