Hola a todos ~ Actualmente tengo el requisito de que el artículo solo puede aparecer en dos líneas como máximo. Cuando hay más de dos líneas de texto, debe usar los puntos suspensivos. Sin embargo, utilicé este método de configuración de CSS para trabajar, pero se basa en ciertos entornos de desarrollo. La relación hará que la pantalla: -webkit-box; inválido.
Así que tengo que encontrar otras configuraciones de CSS, para que el texto solo aparezca en dos líneas como máximo, y la parte sobrante se convierta en puntos suspensivos. No sé si puedes conocer otras configuraciones. ¿Qué tal? Gracias
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>