css实现文字超出省略号代替
当我们在项目中,设计师给出方案,要求实现文字过长需要用省略号代替。如一行文字过长,超出一行的文字用省略号代替。有时候可能我们会用js去实现这个效果。不多说,直接上代码。(js代码如下)
var sl = document.getElementById("wenzishenglue").innerHTML.slice(0,20)+"...";
document.getElementById("wenzishenglue").innerHTML = sl;
var sl = document.getElementById("wenzishenglue").innerHTML.substring(0,20)+"...";
document.getElementById("wenzishenglue").innerHTML = sl;
var sl = document.getElementById("wenzishenglue").innerHTML.substr(0,20)+"...";
document.getElementById("wenzishenglue").innerHTML = sl;
这里我使用了JavaScript string的三种方法实现提取20个文字,其后用省略号代替。然而并……
当设计师看到实际效果,咆哮,你这是什么鬼……无语。我要的不是这种效果,后面还有那么长的宽度,我要的是文字超出一行要省略号。呃,好吧!
后来去看css3文字效果,还真发现了一个号东西。是什么呢,就是text-overflow。
text-overflow:规定当文本溢出包含元素时发生的事情。
值 | 说明 |
clip | 修剪文本 |
ellipsis | 显示省略号来代替被修剪的文字 |
string | 使用给定字符串代替被修剪的文字 |
实现文字超出一行用省略号代替,text-overflow: ellipsis;贴上代码
{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
overflow使得超出的部分隐藏,white-space让文字不换行,现在实现了文字超出一行用省略号代替。
但是这个属性只实现单行文本超出,那么多行文本呢?
代码如下:
.duohang{
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;必须属性,规定弹性伸缩盒子子元素的排列方式。