Material UI React Select长文本换行及下拉宽度适配方案

MUI 默认的 Select 组件对下拉层、选项、选中值区域都默认设置了white-space: nowrap强制不换行，且下拉层宽度默认自适应内容宽度，长文本会直接撑宽容器，导致超出Select本身宽度、移动端视口截断，按以下修改即可全端适配：

核心修改点 #

• 约束下拉弹出层宽度：强制下拉层宽度和Select触发框一致，同时设置最大宽度限制，避免移动端超出屏幕
• 开启选项文本换行：覆盖MenuItem默认的不换行配置，增加断词规则处理无空格长文本
• 适配选中态显示：让Select输入框内的已选中值也支持换行，避免选中长文本时框内内容截断

完整可直接复用的代码 #

<FormControl sx={{ m: 1, minWidth: '100%', marginLeft: 0, padding: 0 }}>
  <Select
    value={prompt}
    onChange={handleChange}
    displayEmpty
    inputProps={{ 'aria-label': 'Without label' }}
    // 下拉弹出层宽度约束
    MenuProps={{
      PaperProps: {
        sx: {
          maxWidth: '100%',
          width: 'anchor', // MUI v5.10+ 支持，直接匹配Select触发按钮宽度
        }
      }
    }}
    sx={{
      bgcolor: 'rgba(139, 139, 139, 0.3)',
      color: 'white',
      border: '1px solid rgba(255, 255, 255, 0.4)',
      minWidth: '100%',
      marginLeft: 0,
      padding: 0,
      // 选中值区域换行样式
      '& .MuiSelect-select': {
        whiteSpace: 'normal',
        wordBreak: 'break-word',
        lineHeight: 1.4,
        paddingY: '8px !important'
      }
    }}
  >
    {prompts.map((promptText, i) => (
      <MenuItem 
        key={i} 
        value={i}
        // 下拉选项换行样式
        sx={{
          whiteSpace: 'normal',
          wordBreak: 'break-word',
          lineHeight: 1.4,
          paddingY: 1
        }}
      >
        {promptText}
      </MenuItem>
    ))}
  </Select>
</FormControl>

兼容说明 #

• 如果使用的MUI版本低于v5.10不支持width: 'anchor'，把该属性替换为width: '100%'，同时给FormControl加上position: 'relative'即可实现下拉层和Select等宽效果
• wordBreak: 'break-word'会自动处理无空格的超长连续字符串（比如长链接、连续英文），不会出现文本撑破容器的问题
• 不需要额外编写媒体查询，这套样式会自动适配桌面、移动端视图，下拉层不会超出Select宽度，也不会在移动端产生横向滚动条
• 代码里把循环项的变量名从prompt改成了promptText，避免和外层状态变量prompt重名产生隐性bug

调整后长文本会在容器宽度内自动折行，多行文本的行高、内边距做了适配，不会出现文字拥挤的情况。

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