Problem: Clamp Text with Optional Read More Button
Problem description
Design a text block clamped to three lines with ellipsis, followed by a static “Read more” button. The button is non-functional (no JavaScript) and meant to demonstrate layout planning for expandable content.
Goal
Clamp the paragraph to 3 lines and place a static “Read more” button below it, without breaking layout or overflowing the container.
Constraints
Use only HTML and CSS.
Clamp text to three lines.
Button must remain aligned and not overlap with text.
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: Clamp Text with Optional Read More Button
Problem description
Design a text block clamped to three lines with ellipsis, followed by a static “Read more” button. The button is non-functional (no JavaScript) and meant to demonstrate layout planning for expandable content.
Goal
Clamp the paragraph to 3 lines and place a static “Read more” button below it, without breaking layout or overflowing the container.
Constraints
Use only HTML and CSS.
Clamp text to three lines.
Button must remain aligned and not overlap with text.
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.