Elipsis for items selected in the dropdown #1333
Description
Feature Request: Add text ellipsis for long selected item labels
Description:
Currently, when a user selects an item with a very long label, the full text is displayed in the input/selection area. This causes layout issues such as overflowing or breaking the UI, especially in narrow containers.
It would be very helpful to have built-in support for text truncation with ellipsis (...) for selected items when their content exceeds the available space.
Proposed Solution:
- Provide an option to enable ellipsis on selected items.
- Allow customization via CSS or a configuration option (e.g.,
truncateSelectedItems: true). - Optionally, display the full text on hover with a tooltip.
Benefits:
- Improves UI consistency for long option labels.
- Prevents breaking layouts in responsive designs.
- Enhances readability without removing full access to the label (via tooltip).
Example Use Case:
If a user selects an option like:
"This is a very long option label that does not fit well inside the selection box",
the display could instead show:
"This is a very long option..."