如何使用 CSS 使文本最多只出现在两行？ [复制]答案

【问题标题】：How to use CSS to make text only appear on two lines at most? [duplicate]如何使用 CSS 使文本最多只出现在两行？ [复制]
【发布时间】：2023-03-23 14:30:01
【问题描述】：

大家好~我目前有个要求，文章最多只能出现两行。当文本多于两行时，需要使用省略号省略号。但是，我使用这种 CSS 设置方法来工作，但它是基于某些开发环境的。该关系将使显示：-webkit-box；无效。

所以只好找其他的CSS设置，让文字最多只出现两行，多余的部分变成省略号。不知道你能不能知道其他设置。这个怎么样？谢谢

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

&lt;p&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis iste dolorem deleniti similique obcaecati, repellat officiis. Rerum, excepturi? Doloribus voluptas aspernatur aut voluptatibus sit, alias tempora repellat voluptate expedita dolorum aliquam quis consequuntur maiores facere. Praesentium veniam eum numquam cumque soluta quia facilis iste! Asperiores, fugit. Fuga doloribus optio doloremque eius velit accusamus unde perspiciatis deleniti quos ea sit eligendi, harum delectus reprehenderit perferendis blanditiis impedit cum voluptatum assumenda. Unde, quo ad. Repellendus voluptates odio eligendi hic molestias nostrum saepe impedit numquam deleniti? Ut voluptas saepe, eveniet repellendus illum, cupiditate possimus expedita, minima omnis corporis dolorum quae minus rerum maiores?similique obcaecati, repellat officiis. Rerum, excepturi? Doloribus voluptas aspernatur aut voluptatibus sit, alias tempora repellat voluptate expedita dolorum aliquam quis consequuntur maiores facere. Praesentium veniam eum numquam cumque soluta quia facilis iste! Asperiores, fugit. Fuga dolorsimilique obcaecati, repellat officiis. Rerum, excepturi? Doloribus voluptas aspernatur aut voluptatibus sit, alias tempora repellat voluptate expedita dolorum aliquam quis consequuntur maiores facere. Praesentium veniam eum numquam cumque soluta quia facilis iste! Asperiores, fugit. Fuga dolor&lt;/p&gt;

【问题讨论】：

只有js才有可能
无法在 Firefox 中使用 CSS，因为在 content is limited to a single line 时仅显示省略号的错误
@AHaworth 多么有趣：Mozilla 似乎已经实现了 OP 使用的 webkit 扩展及其“webkit-”扩展前缀。删除帖子中的任何前缀，它就会停止工作（在 Firefox 中）。我之前评论中链接的问题在今天（2021 年）的 Firefox 中的行为（失败）与 8 多年前相同。
@traktor yes caniuse.com 指出需要 -webkit- 前缀。

标签： javascript jquery css

【解决方案1】：

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
    <style>
p{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: box;
   line-clamp: 2; /* number of lines to show */
   box-orient: vertical;
}
</style>
  </head>

  <body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis iste dolorem deleniti similique obcaecati, repellat officiis. Rerum, excepturi? Doloribus voluptas aspernatur aut voluptatibus sit, alias tempora repellat voluptate expedita dolorum aliquam quis consequuntur maiores facere. Praesentium veniam eum numquam cumque soluta quia facilis iste! Asperiores, fugit. Fuga doloribus optio doloremque eius velit accusamus unde perspiciatis deleniti quos ea sit eligendi, harum delectus reprehenderit perferendis blanditiis impedit cum voluptatum assumenda. Unde, quo ad. Repellendus voluptates odio eligendi hic molestias nostrum saepe impedit numquam deleniti? Ut voluptas saepe, eveniet repellendus illum, cupiditate possimus expedita, minima omnis corporis dolorum quae minus rerum maiores?similique obcaecati, repellat officiis. Rerum, excepturi? Doloribus voluptas aspernatur aut voluptatibus sit, alias tempora repellat voluptate expedita dolorum aliquam quis consequuntur maiores facere. Praesentium veniam eum numquam cumque soluta quia facilis iste! Asperiores, fugit. Fuga dolorsimilique obcaecati, repellat officiis. Rerum, excepturi? Doloribus voluptas aspernatur aut voluptatibus sit, alias tempora repellat voluptate expedita dolorum aliquam quis consequuntur maiores facere. Praesentium veniam eum numquam cumque soluta quia facilis iste! Asperiores, fugit. Fuga dolor</p>

  </body>
</html>

【讨论】：