CSS 線夾在 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>

鉻工作正常

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 並不總是添加省略號，但有時會添加。