前端 Ant Design 表单 Label 过长省略处理方法

要处理 label 过长省略的问题，并且让其全部显示并换行，你可以使用 CSS 样式来控制标签的宽度和文本溢出的处理方式。

首先，在<a-form-model-item>标签中添加一个自定义的类名，例如label-wrap，用于后续的样式控制。

然后，在 CSS 中添加以下样式：

.label-wrap label {
  display: block;
  width: 100%;
  word-break: break-all;
  white-space: normal;
}

这样，label 标签就会占满整个宽度，并且当文本过长时会自动换行显示。

完整代码如下：

<tr style='height: 80px'>
  <td rowspan='1' colspan='5'>
    <a-row>
      <a-col :span='12'>
        <a-form-model-item :labelCol='{span: 8}' :wrapperCol='wrapperCol1' label='人力资源是否其他项' prop='isHrOther' class='label-wrap'>
          <a-radio-group v-model='mdl.isHrOther' >
            <a-radio value='1'>
              是
            </a-radio>
            <a-radio value='0'>
              否
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-col>
      <a-col :span='12'>
        <a-form-model-item :labelCol='{span: 8}' :wrapperCol='wrapperCol1' label='人力资源其他' prop='hrOther' style='width: 80%; white-space: nowrap;'>
          <a-textarea
            v-model='mdl.hrOther'
            placeholder='请输入人力资源其他'
            :auto-size='{ minRows: 2, maxRows: 6 }'
          />
        </a-form-model-item>
      </a-col>
    </a-row>
  </td>
</tr>

.label-wrap label {
  display: block;
  width: 100%;
  word-break: break-all;
  white-space: normal;
}