Problem description

Truncate long text within a fixed-width element while allowing users to view the full content on hover using a tooltip.

Goal

Ensure the visible text is truncated with an ellipsis and full content is available via tooltip when hovered.

Constraints

• Use only HTML and CSS.

• Tooltip must use native title attribute.

• Do not use JavaScript or external libraries.

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.