实现单行、多行文本溢出显示省略号...css方法和js方法汇总

**

实现单行、多行文本溢出显示省略号…

**
前提： 在项目过程成中， 经常会遇到文本溢出以省略号… 代替的情况出现， 我总结了四个方法。

1：单行文本的溢出显示省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果图：
2：多行文本溢出显示省略号
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
注意： （局限性） 仅仅适用于WebKit浏览器及移动端
3：兼容写法
p {
position:relative;
line-height:1.6em;
height:3.2em;（n行、n倍的行高）
overflow:hidden;
}

	p::after {
	    content:"...";
	    position:absolute;
	    bottom:0;
	    right:0;
	    padding:0 10px;
	    background:url(bg.png) repeat-y;
	}	
	height高度真好是line-height的2倍；
	结束的省略号用了半透明的png做减淡的效果，或者设置背景颜色；
	IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；
    要支持IE8，需要将::after替换成:after；
    **注意：（局限性）  文字未超出行的情况下也会出现省略号**

4：js方法
判断字符长度， 当字符超出某一长度了，以…替代
注意：
英文字母肯定lenght和字节数都一样：都是１
而中文lenght=1,字节数=2
因此，需要作的就是把中文字符的字节数计算出来。

var str='我我我';
var bytesCount;
for (var i = 0; i < str.length; i++)
{
  var c = str.charAt(i);
  if (/^[\u0000-\u00ff]$/.test(c)) //匹配双字节
  {
  bytesCount += 1;
  }
  else
  {
  bytesCount += 2;
  }
}
alert(bytesCount);
//结果是6
//原理也很简单，用正则判断是不是中文，如果是的话，字节数就加1。
 匹配中文字符的正则表达式： [\u4e00-\u9fa5]
 匹配双字节字符(包括汉字在内)：[^\x0000-\x00ff]

可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

JS中的几个函数：

charAt(num) //获取字符串的num位置的字符
charCodeAt(num)//获取字符串的num位置的字符的unicode编码　
fromCharCode(num)//获取unicode编码对应的字符