多行溢出省略处理

1.单行溢出控制--小菜一碟。

直接用css控制：

text-overflow: ellipsis;
word-break: break-all;
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
width : 23%;

要记得设置一个宽~~

2.多行溢出--更进一步。

最开始做项目时，突然遇到一个多行溢出的需求，然后一番折腾、上网找方法...

 

移动端的控制：（移动端浏览器绝大部分用的是webkit内核，所以可以用-webkit-line-clamp属性）

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

web端css控制：

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

然后发现，用的是-webkit-私有属性。。。此方法对webkit内核有效emmmm,ok除非你不需要兼容其它浏览器。

差点用上插件，还是被挫败。后来自己折腾：

利用父盒子的高度进行处理：

web端js控制：

方法一：

$('.currency_circulation_li_text').each(function(i) {

    var $box1_height = $(this).height();
    var $box2 = $(this).find('.blogs_li_contain_p');
    var flag = 0;
    var i = 0;
    while($box2.height() > $box1_height){
        var $box2_length = $box2.text().length;
        if (flag == 0) {
            $box2.text(($box2.text().substring(0,$box2_length-1))+"…");
            flag = 1;
        }else{
            $box2.text($box2.text().substring(0,$box2_length-2)+"…");
            // console.log($box2.text());
        }
        i++;
    }
});

nice！！！

 

更新：

方法二：

$(".currency_circulation_li_text").each(function (i) {
    var divH = $(this).height();
    var $p = $("p", $(this)).eq(0);
    while ($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };

});