Problem: Text Clamping in Bidirectional (RTL and LTR) Layouts

hard
40 min
Try to clamp text to two lines with ellipsis in both LTR and RTL cards, maintaining proper directionality and layout integrity.

Problem description

Create two cards, one using LTR and the other RTL direction. Each card should clamp the description text to two lines with ellipsis, preserving text direction and layout integrity.

Goal

Apply two-line clamping with proper ellipsis behavior in both LTR and RTL contexts, ensuring mirrored layout and preserved semantics.

Constraints

  • Use only HTML and CSS.

  • Clamp text to two lines.

  • Support both RTL and LTR.

  • No JavaScript is allowed.

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 in Bidirectional (RTL and LTR) Layouts

hard
40 min
Try to clamp text to two lines with ellipsis in both LTR and RTL cards, maintaining proper directionality and layout integrity.

Problem description

Create two cards, one using LTR and the other RTL direction. Each card should clamp the description text to two lines with ellipsis, preserving text direction and layout integrity.

Goal

Apply two-line clamping with proper ellipsis behavior in both LTR and RTL contexts, ensuring mirrored layout and preserved semantics.

Constraints

  • Use only HTML and CSS.

  • Clamp text to two lines.

  • Support both RTL and LTR.

  • No JavaScript is allowed.

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.