多行文本溢出解决方案

by gothic

HTML

<p class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ex, magnam quidem sint cum fuga vero, pariatur ratione reprehenderit laboriosam reiciendis id, numquam sit. Possimus natus tempora suscipit, totam omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ex, magnam quidem sint cum fuga vero, pariatur ratione reprehenderit laboriosam reiciendis id, numquam sit. Possimus natus tempora suscipit, totam omni</p>
    <p class="box2">WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div class="box3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore commodi perferendis inventore corporis modi quia maxime repellat iure, atque ullam incidunLorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore commodi perferendis inventore corporis modi quia maxime repellat iure, atque ullam incidun</p></div>
  <div class="box3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore commodi perferendis inventore corporis modi quia maxime repellat iure, atque ullam incidunLorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore commodi perferendis inventore corporis modi quia maxime repellat iure, atque ullam incidun</p></div><div class="box3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore commodi perferendis inventore corporis modi quia maxime repellat iure, atque ullam incidunLorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore commodi perferendis...

CSS

p {width: 550px;overflow: hidden;border: 1px solid #f00;}
/*方法1*/
        .box1 {  display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
      }
/*方法2*/
      .box2 {

        position:relative;
        line-height:1.4em;
        /* 3 times the line-height to show 3 lines */
        height:4.2em;
        overflow:hidden;
    }
    .box2::after {
        content:"...";
        font-weight:bold;
        position:absolute;
        bottom:0;
        right:0;
        padding:0 20px 1px 45px;
        background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
    }

.box3 {height:4em;}
.box3 p {line-height: 1.5em;}

JavaScript

// jquery方法
$(".box3").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)(\.\.\.)?$/, "..."));
    };
});