选择时替换 <option /> 文本[重复]

Question

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

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

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

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

我想出的方法使选定的值看起来不错，但它也改变了值在选择窗口中的显示方式：

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

看起来不错：

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

所以我想知道是否有一种解决方案可以在选项 only 被选中时为其设置另一个值，即不影响其在选择窗口中的值。

示例：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>)
}