Problem: Text Truncation Inside a Flexbox Layout

med
30 min
Try to truncate overflowing text with ellipsis inside a Flexbox layout while preserving the fixed position of adjacent icons.

The iconProblem description

Create a horizontal layout where a title is followed by an icon. The title should occupy available space and be truncated with ellipsis if it overflows, without affecting the position of the icon.

Goal

Ensure that the title element within a flex container truncates with ellipsis while the icon remains fully visible and aligned.

Constraints

  • Use only HTML and CSS.

  • Do not break layout or wrap lines.

  • Icon must stay visible on the right side.

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 Truncation Inside a Flexbox Layout

med
30 min
Try to truncate overflowing text with ellipsis inside a Flexbox layout while preserving the fixed position of adjacent icons.

The iconProblem description

Create a horizontal layout where a title is followed by an icon. The title should occupy available space and be truncated with ellipsis if it overflows, without affecting the position of the icon.

Goal

Ensure that the title element within a flex container truncates with ellipsis while the icon remains fully visible and aligned.

Constraints

  • Use only HTML and CSS.

  • Do not break layout or wrap lines.

  • Icon must stay visible on the right side.

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.