Problem: Text Clamping for Card Previews

easy
15 min
Try to clamp a content card’s description to two lines with an ellipsis to maintain a clean, preview-style layout.

Problem description

Implement a content card with a title and a short description. The description should be clamped to a maximum of two lines and truncated with ellipsis when it overflows.

Goal

Clamp the paragraph content inside a card component to two lines, maintaining a clean and uniform card layout for previews.

Constraints

  • Clamp only the description text.

  • Use only HTML and CSS.

  • Cards should be consistent in height visually.

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: Text Clamping for Card Previews

easy
15 min
Try to clamp a content card’s description to two lines with an ellipsis to maintain a clean, preview-style layout.

Problem description

Implement a content card with a title and a short description. The description should be clamped to a maximum of two lines and truncated with ellipsis when it overflows.

Goal

Clamp the paragraph content inside a card component to two lines, maintaining a clean and uniform card layout for previews.

Constraints

  • Clamp only the description text.

  • Use only HTML and CSS.

  • Cards should be consistent in height visually.

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.