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.
Share Your Thoughts