Replace text when selected

Question

I have a dynamically created set of options, some of which may have a length of over 15 symbols.

The select component has a custom button to reset it, which normally looks like

When the option value is more that 15 symbols though, it looks awful

I was looking for a solution to change the value, but only if the option is selected.

The one I came up with makes the selected value look okay, but it also changes the way value is display in select window:

{title.length > 15 ? `${title.slice(0, 14)}...` : title}

It looks nice:

But it changes the way it is displayed in the select window:

So I was wondering if there is a solution to set another value to option only when it is selected, i.e. to not affect its value in the select window.

Example: https://codesandbox.io/s/zlm3mlo7pm?fontsize=14

Answer 1

CSS for the win!

text-overflow: ellipsis;

set the width of the text (I assume p tag) to be within the X and you should be good to go

function TextWithEllipsis(props) {
    const styles = {
        width: '50px';
        textOverflow: ellipsis;
    };
    return (<p style={styles} >{props.text}</p>)
}