700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > css实现在一行显示多余部分显示省略号

css实现在一行显示多余部分显示省略号

时间:2020-08-13 22:23:01

相关推荐

css实现在一行显示多余部分显示省略号

独角兽企业重金招聘Python工程师标准>>>

经常会出现一个盒子里放不下内容需要将多余部分显示省略号的需求,今天记录一下css实现的方式

//伪代码<style>p {width:20px;height:20px;overflow: hidden;//多出部分隐藏white-space: nowrap;//一行显示text-overflow: ellipsis;//是否显示省略号}</style><body><div><p>好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容</p></div></body>

如果是两行显示

<style>overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;</style>

可以试一试,最主要是后面的三句代码。如果使用js的话,可以先获取到里面的内容,然后使用字符串的截取方式(substr,substring,slice)等截取到需要的字符串后再加入到需要添加的标签里。

//伪代码let pCon = $('p').text();pCon = pCon > 4 ? pCon.substring(0,4) + '...':pCon;$('p').html(pCon);

如果还想看更多字符串的方法,可以看:数组、字符串常用方法

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。