Problem: Line Clamp with Hover-to-Expand Behavior

hard
40 min
Try to clamp paragraph text to two lines with ellipsis and reveal full content on hover using only CSS.

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

hard
40 min
Try to clamp paragraph text to two lines with ellipsis and reveal full content on hover using only CSS.

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.