Problem description

Truncate overflowing text within a single line by applying CSS rules that preserve the container layout without breaking the flow of content.

Goal

Ensure that when the text content exceeds the container width, it is truncated and shown with an ellipsis (...).

Constraints

• Only use CSS. No JavaScript is allowed.

• The container must remain on a single line.

• Do not hardcode fixed text; solution must work with varying text lengths.

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.