Problem: Line Clamp with Hover-to-Expand Behavior
Problem description
Clamp paragraph text to two lines and allow it to fully expand when the user hovers over the element, using only CSS (no JavaScript is allowed).
Goal
Initially, display only two lines of text. On hover, the text should smoothly expand to show full content.
Constraints
Use only CSS and HTML.
Clamp to two lines initially.
On hover, expand the block to show full text.
Do not use JavaScript or perform any DOM manipulation.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Line Clamp with Hover-to-Expand Behavior
Problem description
Clamp paragraph text to two lines and allow it to fully expand when the user hovers over the element, using only CSS (no JavaScript is allowed).
Goal
Initially, display only two lines of text. On hover, the text should smoothly expand to show full content.
Constraints
Use only CSS and HTML.
Clamp to two lines initially.
On hover, expand the block to show full text.
Do not use JavaScript or perform any DOM manipulation.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.