Safari：-webkit-line-clamp 不显示省略号

Question

我希望 的内容.main限制为 5 行，超过该行时，我想显示省略号。

.main {
  width: 100px;
  margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

<div class="main">
  <ul>
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
    <li>hello4</li>
    <ul>
      <li>hello5</li>
      <li>hello6</li>
      <li>hello7</li>
      <li>hello8</li>
    </ul>
  </ul>
</div>

这在 Chrome 中按预期工作，内容在第 5 行后以省略号结束。但在 Safari 中，最终没有显示省略号。此外，Safari 显示 6 行而不是 5 行。请参阅下面的屏幕截图。

有人对如何在 Safari 中修复它有任何建议吗？

---

版本：

Chrome：版本 85.0.4183.121（官方版本）（64 位）

Safari：版本 13.1.2

Answer 1

对于许多用户来说，这在 safari 中不起作用，我遇到了一种解决方案，您需要在 CSS 中添加 max-height 属性：

 .collection_blurb{
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       max-height: 3em;
  }

<div class="collection_blurb">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
 </div>