如何让MUI Select组件实现强制换行？

我已经实现了给MenuItem添加whiteSpace: 'normal'让菜单项换行，代码如下：

<MenuItem sx={{ whiteSpace: 'normal' }}>
    A very long text goes here
</MenuItem>

菜单项现在能正常多行显示长文本，不会被截断。

但问题来了：怎么让Select组件里选中的内容也支持多行显示？我不想看到强制省略号（...），希望选中的内容能完全展示。试了给Select加各种属性，它还是一直截断内容保持单行，求解决办法。

完整示例代码：

<FormControl variant="standard">
    <Select
        defaultValue={'A'}
        MenuProps={{ sx: { width: 200 } }}
    >
        <MenuItem sx={{ whiteSpace: 'normal', wordWrap: 'break-word' }} value={`A`}>
            A very long text goes here
        </MenuItem>
        <MenuItem sx={{ whiteSpace: 'normal', wordWrap: 'break-word' }} value={`B`}>
            A very long text goes here too
        </MenuItem>
    </Select>
</FormControl>

两种可行解决方案 #

方案1：直接覆盖Select内部样式 #

MUI的Select默认给选中值容器加了whiteSpace: 'nowrap'和textOverflow: 'ellipsis'，我们通过sx属性覆盖这些样式即可：

<FormControl variant="standard">
    <Select
        defaultValue={'A'}
        MenuProps={{ sx: { width: 200 } }}
        sx={{
            '& .MuiSelect-select': {
                whiteSpace: 'normal',
                textOverflow: 'unset',
                wordWrap: 'break-word',
                height: 'auto',
                minHeight: '40px',
                display: 'flex',
                alignItems: 'center'
            }
        }}
    >
        <MenuItem sx={{ whiteSpace: 'normal', wordWrap: 'break-word' }} value={`A`}>
            A very long text goes here
        </MenuItem>
        <MenuItem sx={{ whiteSpace: 'normal', wordWrap: 'break-word' }} value={`B`}>
            A very long text goes here too
        </MenuItem>
    </Select>
</FormControl>

方案2：自定义选中内容渲染 #

如果需要更灵活的控制（比如添加额外样式或逻辑），可以用Select的renderValue属性自定义展示：

<FormControl variant="standard">
    <Select
        defaultValue={'A'}
        MenuProps={{ sx: { width: 200 } }}
        renderValue={(selected) => {
            const text = selected === 'A' 
                ? 'A very long text goes here' 
                : 'A very long text goes here too';
            return <div style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}>{text}</div>;
        }}
    >
        <MenuItem sx={{ whiteSpace: 'normal', wordWrap: 'break-word' }} value={`A`}>
            A very long text goes here
        </MenuItem>
        <MenuItem sx={{ whiteSpace: 'normal', wordWrap: 'break-word' }} value={`B`}>
            A very long text goes here too
        </MenuItem>
    </Select>
</FormControl>

关键样式说明 #

• whiteSpace: 'normal'：允许文本自动换行
• textOverflow: 'unset'：取消默认的省略号截断效果
• wordWrap: 'break-word'：确保超长单词也能拆分换行（可选）
• height: 'auto'/minHeight：让Select高度自适应内容，避免文字被遮挡

内容的提问来源于stack exchange，提问作者Mar Tijn