react antd中的AutoComplete添加验证和tag溢出问题

react antd中的AutoComplete配合Form的验证

<Form form={form}>
 <Form.Item
  label="标签"
  name="labelName"
  rules={[
   {
    required: true,
    message: '请输入标签名称'
   },
   { validator: customValidator }
  ]}
 >
  <AutoComplete
   options={labelList}
   placeholder="请输入标签名称"
   value={value}
   onSearch={onSearch}
   onSelect={onSelect}
   onChange={onChange}
  />
 </Form.Item>
</Form>

const customValidator = (rule, value) => {
 if (value && value.length > 10) {
  return Promise.reject('最多输入十个字符');
 }
 return Promise.resolve();
};

Tag文字过多，溢出问题

<Tag
 key={`${label}-${index}`}
 color="default"
 closable={canEdit}
 onClose={(e) => {
  onDel(e, array[index], documentId);
 }}
>
 <span className={styles.normal_tag} title={label.labelName}>
  {label.labelName}
 </span>
</Tag>

.normal_tag {
 display: inline-block;
 max-width: 100px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 line-height: 1;
}