css实现文本超出省略号代替

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；必须属性，规定弹性伸缩盒子子元素的排列方式。