Safari 中 line clamp（webkit）不起作用。

Question

    display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-pack: end;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;

我把这个内容放到了一个P标签中，但在Safari上不起作用，其他浏览器都可以正常工作。

- Jose A.

---

下次记得在问题中包含HTML和所有CSS，以获得更好的帮助！ - J Davies

Answer 1

如果使用非inline元素，在Safari中无法使用多行截断（webkit）。 这个例子在Chrome（v100）中有效，但在Safari（v15.1）中无效。

div.hide {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  overflow: hidden;
}

button {
  margin-top: 16px;
}

<div id="container" class="hide">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ducimus magni, commodi nesciunt tempora unde ipsa repellendus impedit recusandae rem aliquid, alias illum sunt consequatur animi laudantium distinctio odit explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis totam harum laudantium excepturi repellendus similique non est incidunt vero officia saepe error reprehenderit quibusdam, ex tenetur autem impedit soluta culpa.</p>
</div>

<button onclick="document.querySelector('#container').classList.toggle('hide')">Click me!</button>

但是您可以为段落设置 display: inline;，然后隐藏将正常工作。对于缩进，可以添加伪元素。

div.hide {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  overflow: hidden;
}

p {
  display: inline;
}

p::after {
  content: " \A\A";
  white-space: pre;
}

button {
  margin-top: 16px;
}

<div id="container" class="hide">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ducimus magni, commodi nesciunt tempora unde ipsa repellendus impedit recusandae rem aliquid, alias illum sunt consequatur animi laudantium distinctio odit explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis totam harum laudantium excepturi repellendus similique non est incidunt vero officia saepe error reprehenderit quibusdam, ex tenetur autem impedit soluta culpa.</p>
</div>

<button onclick="document.querySelector('#container').classList.toggle('hide')">Click me!</button>

不幸的是，这是一个hack，可能并不适用于所有情况。但是，在隐藏方面使用display: -webkit-box和-webkit-line-clamp: 3也是一种hack，它在规范中缺失，这可能就是为什么safari不支持它的原因。

最正确和可靠的解决方案是使用js进行隐藏。

- srg

Answer 2

关于 Safari 的一件事情： 这个黑客技巧

.text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    * {
        display: inline;
    }
}

如果您需要使用text-align: justify;，那么这种方法将不起作用。因此，在这种情况下只能应用JS解决方案。

- Andrei Sumin

Answer 3

线条夹紧在Safari上是有效的。

它不适用于内部块级元素： CSS线条夹紧在Safari上不适用于内部块级元素

.line-clamp{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; 
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

<p 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.
</p>

- J Davies

Answer 4

<p>标签通常有默认的浏览器定义的边距，或者如果您使用像Bootstrap这样的CSS库，那么可能会导致在Safari上使用-webkit-line-clamp时似乎无法正常工作或存在错误。

在我的情况下，我有一个预定义的margin-bottom值的<p>位于<div>内部，导致超过-webkit-line-clamp限制的后续行被显示出来。

在Chrome和Firefox中，以下内容正常工作：

<div class="parent">
    <p>Some really long string of text here that eventually gets clamped</p>
</div>

.parent {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

在Safari浏览器中，由于内部的<p>设置了margin-bottom，导致父级<div>的高度增加，从而显示出后续的行。因此，我的跨浏览器解决方案是：

.parent {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.parent > p {
    margin-bottom: 0;
}

- CopyLeft

---

感谢您的详细解释，这对我解决了问题。 我的问题在于我将"line-clamp-1"放在了<p>标签上而不是包装器<div>元素上。 - Tomislav Lazar

Answer 5

我在处理一个包含嵌套富文本元素的部分时，遇到了 Webkit 行截断在 Safari 上无法正常工作的问题。

CSS：

.rich-text-container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

HTML：

<div class="rich-text-container">
  <h2>Heading</h2>
  <p>Paragraph content.</p>
  <h4>Another heading</h4>
  <p>More paragraph content</p>
</div>

我通过添加额外的样式来解决问题，以确保所有相关的嵌套富文本标签都设置了它们的display样式为-webkit-inline-box，如下所示：

.rich-text-container p, h1, h2, h3, h4, h5, h6 {
    display: -webkit-inline-box;
}

- Abtin Gramian

---

这个不起作用。 - Alex Titarenko

@AlexTitarenko 感谢你指出原始答案无效。它只适用于非常特定的情况。我已经更新了答案，提供了一个更通用的解决方法。 - Abtin Gramian