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

【问题标题】：Safari: -webkit-line-clamp isnt showing ellipsisSafari：-webkit-line-clamp 不显示省略号
【发布时间】：2021-01-24 00:19:13
【问题描述】：

我希望.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

【问题讨论】：

这是 StackOverflow 上最常出现的问题之一。 stackoverflow.com/questions/3922739/… 不幸的是，除了使用 Javascript 之外，没有其他简单的解决方案。
@RichardHunter 这不是被问到的问题，根据 caniuse，line-clamp 应该在所有主要浏览器上使用省略号。我也有同样的问题，只在 Safari 中。
我也面临同样的问题
面临同样的问题

标签： html css

【解决方案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>

【讨论】：