How to use CSS to make text only appear on two lines at most?

Question

Hello everyone~ I currently have a requirement that the article can only appear two lines at most. When there are more than two lines of text, you need to use the ellipsis ellipsis. However, I used this CSS setting method to work, but it is based on certain development environments. The relationship will make the display: -webkit-box; invalid.

So I have to find other CSS settings, so that the text will only appear on two lines at most, and the excess part will become an ellipsis. I don’t know if you can know other settings. How about it? Thank you

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

<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>

Can't do it with CSS in Firefox because of a bug that only shows ellipses if [content is limited to a single line](https://stackoverflow.com/questions/14641202/ellipsis-not-working-well-in-firefox-but-works-in-chrome) — traktor, Nov 01 '21 at 09:08
@traktor this doesn't seem to be true any more - see answer from vovan_super which uses -webkit-line-clamp and works for me on Firefox, Window 10. — A Haworth, Nov 01 '21 at 09:16
@AHaworth How interesting: Mozilla appear to have implemented the webkit extensions used by the OP _with their "webkit-" extension prefixes_. Cutout any of the prefixes in the post and it stops working (in Firefox). The question linked in my previous comment behaves (fails in) the same way in Firefox today (2021) as it did over 8 years ago. — traktor, Nov 01 '21 at 09:32
@traktor yes caniuse.com points out the need for the -webkit- prefix. — A Haworth, Nov 01 '21 at 09:35

score 0 · Answer 1 · answered Nov 01 '21 at 08:53

<!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>

How to use CSS to make text only appear on two lines at most?

1 Answers1