el-col内容过长导致出现叠字错误

针对el-col组件中内容显示不正常,出现叠字的问题,文章提出了两种解决方案:1)使用CSS的flex布局,设置父元素为display:flex和flex-wrap:wrap,子元素height:100%,使内容自动换行;2)修改子元素的line-height为normal,并可通过padding调整外观。此外,还可以尝试设置line-height:initial来解决问题。
摘要由CSDN通过智能技术生成

el-col中内容过长,导致出现叠字错误

两种解决方法:
1,通过给父元素添加样式:
display: flex  
flex-wrap: wrap;
给子元素添加样式:
height:100%
就可以实现子元素在一行排列不下时,会自动换行
2.通过给子元素添加样式:
style="line-height: normal"
更改之后可以还可以用padding-top等来改善外观

3.在元素上添加样式:

style="line-height: initial;"

0535649408ab47279abc823814bc7b35.png

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值