单行文本溢出和多行文本溢出省略...

平时在开发过程中,很常见的需求就是文字溢出显示...  此类需求有以下集中方法来解决

1. 单行溢出显示...

overflow:hidden;
width: 200PX;
white-space:nowrap;
text-overflow:ellipsis;

2. 多行文本溢出显示... 

只支持webkit内核

width: 200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; // 几行
-webkit-box-orient: vertical; //子元素应该被水平或垂直排列

3.利用js进行字符串长度截取

(取巧型,不建议,实在没招了可以采用)

我们模拟在一行中大概可以容下多少个字,然后我们再根据想要实现几行后截取的需求进行自定义截取长度。

例:比如说一行只能放在5个字,就换行了。然后我们想实现3行显示... (这样其实我们截取12个字符串长度就可以了。)

let str = '你你你你你你你你你你你你你你你你你' // 17个字
let newStr =  str.substr(0, 12); // 截取12个字
newStr = newStr + '...';
// newStr就是得到截取之后带...的了

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值