选中时替换<option>文本

Question

我有一组动态创建的option，其中一些长度可能超过15个符号。

select组件具有一个自定义按钮来重置它，通常看起来像

当option的值超过15个符号时，它看起来很糟糕

我一直在寻找一种更改值的解决方案，但前提是选择了该选项。

我想到的那个使所选值看起来还不错，但是它也改变了在选择窗口中显示值的方式：

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

看起来不错：

但是它改变了它在选择窗口中的显示方式：

因此，我想知道是否存在一种解决方案，以在选择选项时仅将选项仅设置为另一个值，即不影响选择窗口中其值。

示例：https://codesandbox.io/s/zlm3mlo7pm?fontsize=14

Answer 1

胜利的CSS！

text-overflow: ellipsis;

将文本的宽度（我假设为p标记）设置在X之内，您应该会很好

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