Pages

Mon Apr 14 2025 08:40:01 GMT+0000 (Coordinated Universal Time)


Is there any css style without using JavaScript that show more.. after clamp? - Q and A : Web Development

Share ☞ Copy Link: 🔗 https://newsblist.blogspot.com/2023/04/is-there-any-css-style-without-using.html
Published (Updated) on Saturday, April 8, 2023

Yes, there is an alternative CSS style to show more after clamp without using JavaScript. You can use the :hover pseudo-class to expand the element when the user hovers over it. Here is an example:

.container {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.container:hover {
-webkit-line-clamp:unset;
}

In this example, the container element has the overflow: hidden, -webkit-box-orient: vertical, and -webkit-line-clamp: 2 styles applied to it, which restricts the text to two lines and hides any overflow.

When the user hovers over the container element, the :hover pseudo-class is triggered, and the -webkit-line-clamp property is set to unset, which allows the text to expand and show all content.

Note that this approach only works in webkit-based browsers such as Safari and Chrome. If you need a solution that works across all browsers, you may need to use JavaScript.

News ☛ Agencies and Media

Share Your Thoughts