CSS 线夹在 safari 中不起作用（在 Mac 上）

Question

我在 Safari 浏览器中显示线夹有 2 个问题。 首先是代码片段：

 .clamp-3-lines{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; -webkit-box-pack: end; } div{ border: 1px solid black; max-width: 30ch; p:nth-child(2){ color: red; } }

 <div class="clamp-3-lines"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nisi unde tempore. Impedit reiciendis est nobis aperiam nulla, pariatur asperiores fugiat id. Quam cum non, eum debitis ab officia quaerat. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nisi unde tempore, Impedit reiciendis est nobis aperiam nulla. pariatur asperiores fugiat id, Quam cum non, eum debitis ab officia quaerat! </p> </div>

在 Chrome 中，所有内容都可以毫无问题地显示出来。 然而，在 Safari（在 Mac 上）中，最后一行被截断了： 如果有多个段落，第二段显示在第一段之上，就好像它是绝对定位的一样。 我能够通过删除段落元素的默认边距来修复第一个错误，但这是不希望的。 不幸的是，由于文本通过所见即所得编辑器来自 Wordpress 后端，我也无法对这些段落做任何事情。

Answer 1

在这个例子中你可以做黑客

 /* add padding for visual consistency */.clamp-3-lines{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; -webkit-box-pack: end; padding-top: 1em; } div{ border: 1px solid black; max-width: 30ch; p:nth-child(2){ color: red; } } /* change dislay */ p { display: inline; }

 <div class="clamp-3-lines"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nisi unde tempore. Impedit reiciendis est nobis aperiam nulla, pariatur asperiores fugiat id. Quam cum non, eum debitis ab officia quaerat. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nisi unde tempore, Impedit reiciendis est nobis aperiam nulla. pariatur asperiores fugiat id, Quam cum non, eum debitis ab officia quaerat! </p> </div>

要详细了解为什么会发生这种情况，请单击此处