1. 单行文本溢出显示省略号
1 | width: 300px; |
如果字符串长度超过300px,那么超出部分就变成...
。
2. 多行文本溢出显示省略号
1 | display: -webkit-box; |
因为使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
3. 怎样在js中判断文本是否溢出
问题描述:
一段文字限定行数,使用css把多余文字显示为省略号,请问怎么通过js判断这段文字是否有文字显示为省略号?
3.1. 思路一
王晨帅哥提供了一个思路:取消css的-webkit-line-clamp属性,看看元素高度是否发生了变化,变化了就是有文字显示为省略号。
好想法,最后郝同学改进后如下:这段文字在页面上放两份,一份限定行数,正常显示;另一份不限定行数,隐藏起来。然后,对比这两段文字的高度是否相同。
具体实现:
1 | // scss部分 |
1 | // js部分 |
3.2. 思路二
后来张伟林帅哥提供了一个更好的思路:既然已经知道了限定的行数,那么判断一个高度就可以了。结合line-height,高度用scrollheight,判断scrollheight > line-height*你决定的行数。
郝同学马上搜索了一个scrollheight,发现,原来scrollHeight可以返回元素的完整高度。那么,比较一下scrollHeight和height不就可以了么?
具体实现:
1 | // js部分 |
4. 后记
利用js也可以实现文本溢出显示省略号,可以参考书签中的dotdotdot,很形象的名字。。。
5. 书签
CSS实现单行、多行文本溢出显示省略号(…)
http://www.daqianduan.com/6179.html
jQuery.dotdotdot
http://www.bootcdn.cn/jQuery.dotdotdot/