多行文本省略号

溢出文本显示省略号

写前端页面的时候很多情况下需要省略号，单行文本溢出省略号每次使用都需要百度一下来确认代码的正确性。在这里写一下以后继续百度。。

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

记得加宽度哦。

多行省略号在看过了这篇文章之后，有了两种实用的方法。

1. css样式

 display: -webkit-box;
 display: -moz-box;
 white-space: pre-wrap;
 word-wrap: break-word;
 overflow: hidden;
 text-overflow: ellipsis;
 -webkit-box-orient: vertical;
 -webkit-line-clamp:2;   /*显示行数*/

在为你需要省略号的元素上加上这段代码 ， 当超过2行时，就会只显示两行了。

2. js控制

    $(".text").each(function() {
    	    if ($(this).text().length > 80) {//要求字数大于20才进行字数替换
    	        $(this).html($(this).text().replace(/\s+/g, "").substr(0, 80) + "...")
    	        //从0到80开始替换，将剩余文本内容替换为"..."
    	    }
    	})

这段代码可以有控制省略号的位置，比如想要一行半就出现省略号，那么调整合适的字数就可以了。