首页 > 其他分享 >Antd之表单label超出宽度增加省略号

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

时间:2022-11-15 11:58:22浏览次数:45  
标签:省略号 form label ant item Antd

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

代码结构如下:

使用

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

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

解决方法:

改成

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

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

需要给label加上padding-top。

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

即可。

标签:省略号,form,label,ant,item,Antd
From: https://www.cnblogs.com/luoyihao/p/16891939.html

相关文章

  • label标签
    一个完整的表单是由表单标签<from></from>语气中包裹的各种表单控件组成的。label标签是一种常见的表单控件。作用:是用户在填写表单的项目时有更好的体验。举例【部分完......
  • fluentd 配置文件中label的作用是什么?
    在正常的情况下,在fluentd的配置文件中,是像下面这样进行配置的: <source>@typehttpport8888bind0.0.0.0</source><filtertest.cycle>@typegrep<......
  • react-router-dom v6+antd+react18配置
    官网地址:react-router1.安装的版本,antd版本4.24.12.项目目录结构3.入口文件index.js配置,react18版本发生了一些变化,改为以下写法importReactfrom'react';import......
  • LaTeX itemize/ enumerate 添加标号 \label 用于引用 \ref
    {itemize}命令 正文部分(案例):\begin{itemize}\item[1)]Themeasurements...\item[2)]Thetargets...\item[3)]Theset...\item[4)]The......
  • k8s04- Label 和Selector-Service-ingress
    Label和SelectorServiceingress1.Label和Selector1定义label应用案例公司与xx银行有一条专属的高速光纤通道,此通道只能与192.168.7.0网段进行通信,因此只能将与x......
  • antd table 树形数据动态加载
    antd的table组件支持树形结构的数据,不过前提是需要将整棵树的数据一次性全部返回,对于数据量比较大的情况下,可能会需要动态加载数据。exportdefaultfunctionDynamicT......
  • Antd Tree树形控件 自定义插槽
    使用titleRender属性自定义节点渲染函数,不需要处理树型数据,达到比如右侧新增按钮的需求(如图三)<Tree ... titleRender={(nodeData)=>{return(......
  • antdv (Ant Design of Vue) 复杂表单验证问题解决方法
    我们知道,在简单的表单中,都是一项一项往下排列的,验证的时候也按照字段一一对把规则写好就能验证,如下图  但是遇到了复杂场景的表单验证,比如一项由多个input、checkbox......
  • Labelme使用
    安装pipinstalllabelmepython版本<3.10。注意:python3.10版本可能出现闪退情况。使用终端下输入命令打开GUI界面。labelme设置关闭Savewithimagedata......
  • Element select选择器 el-select获取value值和label值
    通常在使用的时候,v-model的值为当前被选中的el-option的value属性值,但有些时候我们也需要用到label值,这时我们需要把:value="item.value"改成:value="{value:item.va......