Problem: Truncate Text in a Dropdown Option List

med
30 min
Try to truncate long dropdown option text to a single line with ellipsis, ensuring consistent option height.

Problem description

Create a dropdown menu with a list of options. Each option should display a single line with ellipsis truncation if the text is too long, while maintaining uniform option height.

Goal

Ensure dropdown items truncate with ellipsis when the text is too long to fit in the visible width.

Constraints

  • Truncate only the text inside each option.

  • Use only CSS and semantic HTML.

  • No JavaScript is required.

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: Truncate Text in a Dropdown Option List

med
30 min
Try to truncate long dropdown option text to a single line with ellipsis, ensuring consistent option height.

Problem description

Create a dropdown menu with a list of options. Each option should display a single line with ellipsis truncation if the text is too long, while maintaining uniform option height.

Goal

Ensure dropdown items truncate with ellipsis when the text is too long to fit in the visible width.

Constraints

  • Truncate only the text inside each option.

  • Use only CSS and semantic HTML.

  • No JavaScript is required.

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.