如何将Ant Design多选Select值显示为逗号分隔的截断文本？

Ant Design Select 提供了**renderValue**属性，和MUI的同名属性功能一致，可完全自定义选中值的渲染逻辑，刚好解决你的需求——将选中值转为逗号分隔文本，过长自动截断并占满输入框空间。

实现代码示例 #

import { Select, Tooltip } from 'antd';
import type { SelectProps } from 'antd';

// 示例选项
const options = [
  { value: 1, label: '短标签1' },
  { value: 2, label: '这是一个非常非常长的标签内容，用来测试文本截断效果' },
  { value: 3, label: '短标签3' },
];

const App = () => {
  const handleChange = (value: number[]) => {
    console.log('选中值:', value);
  };

  // 自定义选中值渲染函数
  const renderSelectedValue: SelectProps['renderValue'] = (selectedItems) => {
    // 拼接选中项的label为逗号分隔文本
    const fullText = selectedItems.map(item => item.label).join(', ');
    // 用Tooltip包裹实现hover查看完整内容，同时设置截断样式占满空间
    return (
      <Tooltip title={fullText}>
        <div style={{ 
          width: '100%', 
          whiteSpace: 'nowrap', 
          overflow: 'hidden', 
          textOverflow: 'ellipsis' 
        }}>
          {fullText}
        </div>
      </Tooltip>
    );
  };

  return (
    <Select
      mode="multiple"
      defaultValue={[1, 2]}
      onChange={handleChange}
      options={options}
      renderValue={renderSelectedValue} // 启用自定义渲染
    />
  );
};

export default App;

效果说明 #

• 选中值以逗号分隔的单行文本形式展示，自动占满输入框全部宽度
• 文本过长时自动截断并显示省略号，hover时通过Tooltip查看完整内容
• 完全避免了默认标签模式下的空间浪费问题

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