文字溢出用省略号表示

一、单行溢出
1、text-overflow方法
前提条件：必须有宽度

width: 300px;
overflow:  hidden;
text-overflow: ellipsis;
white-space: no-wrap;

2、margin负值定位法--兼容所有主流浏览器（张鑫旭大神的方法）
原理：当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。

// html部分

        
这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。
        
…
 

//CSS部分
       .test2 {
            border: 1px solid #cfcfcf;
            width: 24em;
            height: 4em;
        }

        .test2>.zxx_con {
            float: left;
            height: 4em;
            margin-right: 1em;
            overflow: hidden;
        }
        .test2 > .zxx_dotted{
            width: 1em;
            height: 4.1em;
            float: right;
            margin-top: -4em;
        }

二、多行溢出
1、使用-webkit-line-clamp
适用范围：只适用于Webkit内核的浏览器及移动端。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

其中，-webkit-line-clamp用来限制在一个块元素显示的文本的行数，为实现效果，有两个必须结合的属性：
（1）display: -webkit-box; 将对象作为弹性伸缩盒子模型显示 。
（2）-webkit-box-orient：设置或检索伸缩盒对象的子元素的排列方式
2、jQuery限制字符字数方法
直接上代码：

// HTML 部分

        君不见黄河之水天上来，奔流到海不复回。 君不见高堂明镜悲白发，朝如青丝暮成雪 。人生得意须尽欢，莫使金樽空对月。   


//CSS部分
.box{
    width: 400px;
    margin: 100px auto;
    border: 1px solid #cfcfcf;
}

// JS部分
$(document).ready(function(){
    $(".box").each(function(){
        var maxwidth = 20;    
        content = $.trim($(this).text());    //去除文本前后的空格
        if(content.length > maxwidth){
            $(this).text(content.substring(0, maxwidth));
            $(this).html($(this).html()+'...');
        }
    });
});