实现MUI Autocomplete下拉框医院名称单行截断显示

问题分析 #

当前使用MUI Autocomplete实现医院选择时，选中的超长医院名称会自动换行，不符合单行显示+超过15字符截断并添加省略号的需求。

解决方案 #

通过CSS文本截断属性结合MUI的sx样式配置，同时针对输入框和下拉选项做统一处理，也可按需添加字符数精确截断逻辑：

1. 样式层面实现单行截断 #

在Autocomplete组件的sx属性中，覆盖输入框和下拉选项的默认样式，强制单行并添加省略号：

sx={{
  // 处理输入框内的选中文本
  '& .MuiAutocomplete-inputRoot': {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
  // 处理下拉列表中的选项文本
  '& .MuiAutocomplete-option': {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    maxWidth: '100%',
  }
}}

2. 字符数精确截断（可选） #

如果需要严格按15字符截断，可在getOptionLabel中手动处理文本：

getOptionLabel={(option) => {
  const fullLabel = `${option.hospCode}: ${option.hospName}`;
  return fullLabel.length > 15 
    ? `${fullLabel.substring(0, 15)}...` 
    : fullLabel;
}}

完整修改后的代码 #

import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import React, { useState } from "react";

const hospitalList = {
  docs: [
    {
      _id: "1",
      hospCode: "1090123413",
      hospName: "AHS Southcrest Hospital, LLC dba Hillcrest Hospital South"
    },
    {
      _id: "2",
      hospCode: "2589230310",
      hospName: "Ascension Macomb-Oakland Hospital, Madison Heights Campus"
    },
    {
      _id: "3",
      hospCode: "300156700",
      hospName: "Atrium Health Wake Forest Baptist Health Wilkes Medical Center"
    },
    {
      _id: "4",
      hospCode: "40969123862",
      hospName: "CHI Health Creighton University Medical Center - Bergan Mercy"
    }
  ]
};

export default function App() {
  const [selectedHospital, setSelectedHospital] = useState();

  return (
    <div id="hospital-selector" className="mr-2 flex-1 ">
      <Autocomplete
        sx={{
          '& .MuiAutocomplete-inputRoot': {
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
          },
          '& .MuiAutocomplete-option': {
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            maxWidth: '100%',
          }
        }}
        disableListWrap
        loading={hospitalList.docs.length <= 0}
        options={hospitalList.docs}
        onChange={(option, value) => {
          if (
            value &&
            Object.prototype.hasOwnProperty.call(value, "hospCode")
          ) {
            setSelectedHospital(value);
          }
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            required
            placeholder="Select hospital"
            variant="outlined"
            InputProps={{
              ...params.InputProps
            }}
          />
        )}
        getOptionLabel={(option) => {
          const fullLabel = `${option.hospCode}: ${option.hospName}`;
          return fullLabel.length > 15 
            ? `${fullLabel.substring(0, 15)}...` 
            : fullLabel;
        }}
      />
    </div>
  );
}

说明 #

• 样式截断：通过whiteSpace: 'nowrap'强制单行，overflow: 'hidden'隐藏超出内容，textOverflow: 'ellipsis'自动添加省略号，适配不同宽度的容器。
• 字符数截断：手动截取文本可精确控制显示长度，适合对字符数有严格要求的场景。

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