Ant Design Form 组件 Label 文本省略功能异常，如何实现动态省略配置？

问题根因 #

1. 现有代码存在语法错误：ellipsis配置中的tooltip属性值缺少闭合引号，会导致组件渲染异常
2. Ant Design Form.Item 的label默认容器未设置宽度限制，Typography.Text的省略效果需要父容器有明确的宽度约束才能生效

修复代码 #

import { Form, Col, Select, Typography } from 'antd';

const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log(values);
  };

  // 可复用的动态省略label工具函数
  const getEllipsisLabel = (label, tooltipText) => (
    <Typography.Text 
      ellipsis={{ tooltip: tooltipText || label }}
      style={{ width: '100%', display: 'inline-block' }}
    >
      {label}
    </Typography.Text>
  )

  return (
    <Form
      form={form}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      onFinish={onFinish}
    >
      <Col span={8}>
        <Form.Item
          name="Placeholder input"
          label={getEllipsisLabel("Placeholder input", "自定义tooltip内容")}
        >
          <Select placeholder="Search by Type" notFoundContent={null} />
        </Form.Item>
      </Col>
    </Form>
  )
}

配置说明 #

• 给Typography.Text添加style={{ width: '100%', display: 'inline-block' }}，让文本节点继承labelCol的宽度，触发省略规则
• 封装的getEllipsisLabel工具函数可全局复用，实现所有Form.Item的label省略效果动态配置，无需重复编写逻辑
• 如需全局统一配置所有Form的label省略效果，可以在项目入口的ConfigProvider中添加如下配置，所有Form.Item的label会自动带省略效果：

<ConfigProvider
  form={{
    itemLabelRender: (label) => (
      <Typography.Text ellipsis={{ tooltip: label }} style={{ width: '100%', display: 'inline-block' }}>
        {label}
      </Typography.Text>
    )
  }}
>
  {/* 应用根组件 */}
</ConfigProvider>

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