El texto de webkit-line-clamp se superpone si hay elementos de lista dentro del elemento contenedor en el navegador Safari.

Intenté implementar un límite de líneas para texto multilinea. Encontré la propiedad de recorte de línea para esto. También intenté agregar elementos de lista dentro del contenedor `

Esto funciona bien en el navegador Chrome, pero en el navegador Safari, el texto se superpone.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

<div class="test">
   Lorem Ipsum es simplemente el texto de relleno de la industria de impresión y composición tipográfica. Lorem Ipsum ha sido el texto de relleno estándar de la industria desde el año 1500, cuando un impresor desconocido tomó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
   <ol>
      <li>Hola mundo</li>
      <li>Hola mundo</li>
      <li>Hola mundo</li>
      <li>Hola mundo</li>
      <li>Hola mundo</li>
      <li>Hola mundo</li>
      <li>Hola mundo</li>
   </ol>
</div>

<!-- end snippet -->

Pregunta similar
`https://stackoverflow.com/questions/64271205/safari-webkit-line-clamp-isnt-showing-ellipsis`

He estado tratando de resolver esto pero no he encontrado la solución.

Utilice el navegador Safari para ver el resultado del texto superpuesto.

`Enlace de jsfiddle: https://jsfiddle.net/u5v0e7k6/1/`

[Enlace de la captura de pantalla](https://i.stack.imgur.com/Zr8Du.png)