最近项目中很多地方有文本溢出显示省略号的需求,今天就来整理一下,怎样用css实现单行/多行文本溢出的功能。
1.单行文本溢出显示
效果如下:
html中的定义:
<p class="signal">css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号</p>
css实现:
.signal {
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
单行文本溢出使用text-overflow:ellipsis属性来实现。
2.多行文本溢出
效果如下:
css实现:
.signal {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
多行文本溢出使用了WebKit的CSS扩展属性,该方法只适用于WebKit浏览器及移动端。
3.使用js实现文本溢出显示
效果如下:
html:
<p id="signal" class="signal"></p>
<script type="text/javascript">
function test() {
let str = 'css实现单行文本溢出显示省略号css实现单行文本溢出显示省略号';
str = str.slice(0,8) + '...';
document.getElementById("signal").innerText = str;
}
test();
</script>
使用字符串截取方法slice(),截取一部分字符串显示在文本位置。
js实现文本溢出与css实现文本溢出dom显示比较:
由上图比较可以看出,css实现文本溢出并没有改变dom内容,只是对dom的内容进行显示与隐藏。而js,实现的是对dom内容的改变。