--webkit-line-clamp 文本重叠，如果在 safari 浏览器的容器元素内有列表元素答案

【问题标题】：--webkit-line-clamp text overlapping if there are lists element inside the container element on safari browser--webkit-line-clamp 文本重叠，如果在 safari 浏览器的容器元素内有列表元素
【发布时间】：2026-01-29 22:15:01
【问题描述】：

我尝试为多行文本实现行数限制。为此找到了线夹属性。我还尝试在容器内添加列表元素 <ol></li></li></ol> 这在 chrome 浏览器上运行良好，但在 safari 浏览器上，文本将重叠..

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

<div class="test">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
   <ol>
      <li>Hello world</li>
      <li>Hello world</li>
      <li>Hello world</li>
      <li>Hello world</li>
      <li>Hello world</li>
      <li>Hello world</li>
      <li>Hello world</li>
   </ol>
</div>

类似的问题 Safari: -webkit-line-clamp isnt showing ellipsis

一直在尝试解决这个问题，但没有找到解决方案。

使用 safari 浏览器查看重叠文本结果

jsfiddle 链接：https://jsfiddle.net/u5v0e7k6/1/

【问题讨论】：

标签： css safari overlapping

【解决方案1】：

我也有类似的问题。

将<ol> 上的display 设置为inline-block（或<ul>，也会出现问题）为我解决了这个问题。

一般来说，在我看来，Safari 不能很好地处理 blocks 显示在带有 line-clamp 设置的容器内。

【讨论】：