Antd之表单label超出宽度增加省略号

创创精灵 lv.1

发布时间：2022-11-24 02:06:00 370

相关标签：

需求：Antd之表单label超出宽度增加省略号

代码结构如下：

Antd之表单label超出宽度增加省略号_Antd

使用

.ant-form-item-label{
  text-overflow: ellipsis;
}

无效，原因是label的display:inline-flex值使其无效。

Antd之表单label超出宽度增加省略号_代码结构_02

解决方法：

改成

.ant-form-item-label > label{
  display: inline;
}

但是，修改后页面label字段偏上了，没有对齐。

Antd之表单label超出宽度增加省略号_Antd_03

需要给label加上padding-top。

.ant-form-item-label{
  text-overflow: ellipsis;
  padding-top: 5px;
}

即可。

Antd之表单label超出宽度增加省略号_解决方法_04

文章来源： https://blog.51cto.com/u_15686949/5871230

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。