CSS--文本溢出的处理

1.单行文本溢出
单行文本溢出一般没有代码上的兼容问题，
//需要对元素盒子设置一个宽度以兼容部分浏览器
overflow: hidden; //超出部分隐藏
white-space: nowrap; //表示不换行
text-overflow: ellipsis; //加省略号

2.多行文本溢出
适用于webkit浏览器（如chrome、QQ极速、搜狗等）和移动端。

display: -webkit-box; //必须有，对象作为弹性伸缩盒子模型显示
overflow:hidden;
text-overflow: elipsis;
word-break: break-all;
-webkit-box-orient:vertical; //伸缩盒子子元素的排列方式
-webkit-line-clamp: 2 //数字表示是文本行数，如3，表示第三行会出现省略号，限制一个块内显示的文本行数

3.跨浏览器的兼容方案
将相对定位的容器设置高度，同时用包含省略号的元素模拟实现.—多浏览器兼容

p {
   position: relative; /* 设置相对定位*/
   width: 100px;
   line-height: 1.4em;
   height: 4.2em;/*高度设置为line-height的三倍 */
   overflow: hidden;
}
p::after {
    content:"..."; /*包含省略号的元素*/
    position: absolute;
    /*表示在右下的位置*/
    bottom: 0;  
    right: 0;
    padding-left: 40px;
    /*设置渐变背景色*/
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
    /*或者用半透明图片PNG*/
    backgroud: url(..xxx/ellipsis.png) repeat-y;
}

注意事项：

height是line-height的高度的三倍表示有三行；
省略号元素用半透明的png或者设置渐变背景颜色，可以避免文字只显示一半；
IE6-7不会显示content内容，兼容IE6-7在内容里加一个标签如’<span class=“line-clamp”>…'去模拟省略号
兼容IE8将 ::after替换为 :after

但是该方法会使得在文字没有超行的情况下也会显示省略号。
解决办法—使用JS实现，利用JS判断行数达到要求后再添加多行省略的CSS样式

p {
   position: relative; /* 设置相对定位*/
   width: 100px;
   line-height: 16px; /*行高为16px，如果是四行，高度为4*16=64px*/
   overflow: hidden;
}
.p-after:after {
    content:"..."; /*包含省略号的元素*/
    position: absolute;
    /*表示在右下的位置*/
    bottom: 0;  
    right: 0;
    padding-left: 40px;
    /*设置渐变背景色*/
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);

//获取文本的行高和高度，对超过行数的部分限制高度，然后加上省略号
$(function(){
    $('p').each(function(i,obj){
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        //判断高度是否是行高的4倍即是否超过了四行
        if((height / lineHeight)> 4){
            $(this).addClass("p-after");
            $(this).css("height","64px");//line-height值*行数=高度值
        }else {
            $(this).removeClass("p-after");
        }
    })
})

CSS--文本溢出的处理

猜你喜欢