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