CSS实现文本溢出显示省略号

文章目录
  1. 1. 单行文本溢出显示省略号
  2. 2. 多行文本溢出显示省略号
  3. 3. 怎样在js中判断文本是否溢出
    1. 3.1. 思路一
    2. 3.2. 思路二
  4. 4. 后记
  5. 5. 书签

单行文本溢出显示省略号

1
2
3
4
width: 300px; 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

如果字符串长度超过300px,那么超出部分就变成...

多行文本溢出显示省略号

1
2
3
4
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

因为使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

怎样在js中判断文本是否溢出

问题描述:
一段文字限定行数,使用css把多余文字显示为省略号,请问怎么通过js判断这段文字是否有文字显示为省略号?

思路一

王晨帅哥提供了一个思路:取消css的-webkit-line-clamp属性,看看元素高度是否发生了变化,变化了就是有文字显示为省略号。

好想法,最后小编改进后如下:这段文字在页面上放两份,一份限定行数,正常显示;另一份不限定行数,隐藏起来。然后,对比这两段文字的高度是否相同。
具体实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// scss部分
.info{
font-size: 1.2rem;
margin-top: .6rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
p{
&:not(:first-child){
margin-top: .4rem;
};
line-height: 1.8rem;
}
}

.info-hidden{
position: fixed;
z-index: -10;
visibility: hidden;
font-size: 1.2rem;
margin-top: .6rem;
p{
&:not(:first-child){
margin-top: .4rem;
};
line-height: 1.8rem;
}
}

1
2
3
4
5
6
// js部分
var $info = $('.info');
var $info_hidden = $('.info-hidden');
if($info.height() === $info_hidden.height()){
$('.more').hide();
}

思路二

后来张伟林帅哥提供了一个更好的思路:既然已经知道了限定的行数,那么判断一个高度就可以了。结合line-height,高度用scrollheight,判断scrollheight > line-height*你决定的行数。

小编马上搜索了一个scrollheight,发现,原来scrollHeight可以返回元素的完整高度。那么,比较一下scrollHeight和height不就可以了么?
具体实现:

1
2
3
4
5
6
7
// js部分
var $info = $('.info');
console.log($info.height());
console.log($info[0].scrollHeight);
if($info.height() >= $info[0].scrollHeight){
$('.more').hide();
}

后记

利用js也可以实现文本溢出显示省略号,可以参考书签中的dotdotdot,很形象的名字。。。

书签

CSS实现单行、多行文本溢出显示省略号(…)
http://www.daqianduan.com/6179.html

jQuery.dotdotdot
http://www.bootcdn.cn/jQuery.dotdotdot/