前端页面使用CSS方法处理字符串过长的问题最简便

1 篇文章 0 订阅

     做一个项目或者应用的时候我们经常会遇到这样的需求, 表格或者某容器内的字符串过长,撑大了表格,让布局变形。 于是我们需要对字符串处理。 截取固定的长度,多余的长度显示为‘...’ ,  于是我们可能会想很多办法,截取字符串,拼接成固定长度, 也可能在后端处理好传到页面,也可能在前端通过Javascript 通过精妙的方法取dom 计算长度处理。  现在有一个更简单的方法在字符串的父容器添加样式。 

 

style="width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"

width:180px //是想要固定的长度。  

这样就可以了, 简单多了。 另外很多时候紧跟着会有这样的需求, 鼠标悬停的时候需要显示完整的字符串内容,那么在父容器在添加这样的属性:


title=“xxxxxx”  //完整的字符串


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dangkei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值