解决Material-UI Autocomplete长文本溢出：换行或扩展下拉宽度

方案一：点击时根据文本长度扩展下拉框宽度 #

通过自定义PopperComponent，在下拉框打开时计算所有选项的最长文本宽度，动态调整下拉框宽度，关闭时恢复默认状态。

实现代码 #

import { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Popper from '@mui/material/Popper';

const options = [
  { name: 'verylongusernamewithoutanyspacesthatgetstruncated' },
  { name: 'normaluser' },
  { name: 'anotherlongusernameexampleforthisdemo' }
];

export default function AutoCompleteDemo() {
  const [popperWidth, setPopperWidth] = useState('auto');

  const CustomPopper = (props) => {
    return (
      <Popper
        {...props}
        style={{
          ...props.style,
          width: popperWidth
        }}
      />
    );
  };

  const handleOpen = () => {
    // 计算最长选项的文本实际宽度
    const maxWidth = Math.max(...options.map(opt => {
      const tempElem = document.createElement('div');
      tempElem.textContent = opt.name;
      tempElem.style.visibility = 'hidden';
      tempElem.style.position = 'absolute';
      tempElem.style.fontFamily = 'Roboto, Helvetica, Arial, sans-serif'; // 匹配Material-UI默认字体
      document.body.appendChild(tempElem);
      const width = tempElem.scrollWidth;
      document.body.removeChild(tempElem);
      return width;
    }));
    // 额外添加内边距，避免文本紧贴边缘
    setPopperWidth(`${maxWidth + 24}px`);
  };

  const handleClose = () => {
    setPopperWidth('auto');
  };

  return (
    <Autocomplete
      options={options}
      getOptionLabel={(option) => option.name}
      renderInput={(params) => <TextField {...params} label="Username" />}
      PopperComponent={CustomPopper}
      onOpen={handleOpen}
      onClose={handleClose}
    />
  );
}

核心说明 #

• 临时创建DOM元素计算文本真实宽度，确保和组件字体样式一致
• 利用onOpen和onClose钩子控制下拉框宽度的切换
• 通过自定义PopperComponent注入动态宽度样式

方案二：实现长单词换行 #

通过自定义选项渲染组件，添加CSS样式强制长单词换行，彻底避免文本截断。

实现代码（使用Styled Components） #

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { styled } from '@mui/material/styles';

const options = [
  { name: 'verylongusernamewithoutanyspacesthatgetstruncated' },
  { name: 'normaluser' },
  { name: 'anotherlongusernameexampleforthisdemo' }
];

// 自定义选项样式，强制长单词换行
const StyledOption = styled('div')`
  padding: 8px 16px;
  white-space: pre-wrap;
  word-break: break-all;
`;

export default function AutoCompleteDemo() {
  return (
    <Autocomplete
      options={options}
      getOptionLabel={(option) => option.name}
      renderInput={(params) => <TextField {...params} label="Username" />}
      renderOption={(props, option) => (
        <StyledOption {...props}>
          {option.name}
        </StyledOption>
      )}
    />
  );
}

核心说明 #

• white-space: pre-wrap保留文本空白并允许自动换行
• word-break: break-all强制长单词在任意位置拆分换行
• 通过renderOption覆盖默认选项渲染逻辑，注入自定义样式

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