如何在不使用 -webkit-line-clamp 的情况下应用多行省略号答案

【问题标题】：How to apply multiline ellipsis without using -webkit-line-clamp如何在不使用 -webkit-line-clamp 的情况下应用多行省略号
【发布时间】：2022-01-13 12:03:50
【问题描述】：

这里我在 p 标签中有动态加载的内容。我想在特定行之后应用文本省略号（例如，如果内容较长，则将文本省略号显示到第 4 行）

  p {
   width: 400px;
   height: 300px;
   text-align: justify;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiline Ellipsis</title>
</head>
<body>
    <p>
        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.
    </p>
</body>
</html>

【问题讨论】：

你应该阅读这些文章，它们提供了很多关于如何制作线夹的不同技术：css-tricks.com/line-clampin 和 css-tricks.com/almanac/properties/l/line-clamp

标签： html css

【解决方案1】：

您可以将 line-height 设置为已知值（例如 1em），并使用该值在所需的行数之后剪切文本（在您的情况下为 4 em）。之后，您可以使用 ::after 伪元素在纯 CSS 中添加省略号。

p {
  width: 400px;
  text-align: justify;
  position: relative;
  line-height: 1em;
  height: 4em;
  overflow: hidden;
}

p::after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 5px;
  background: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 100%);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiline Ellipsis</title>
</head>

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

</html>

【讨论】：