[译]line clampin让文字在指定的行数内省略号显示

说明

（1）原文：http://css-tricks.com/line-clampin/

（2）非直译

需求: 当文字长度超过N行时，文字后面自动用省略号补齐。

比如，你有如下的HTML代码：

<div class="module">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

但是呢，你想看到下面的效果：

那怎么办呢？

方法一：webkit 的flexbox方法

.module{
     width: 250px;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;  
}

一方面这种方法确实得到了我们想要的效果，另一方面，又觉得这种方法比较hack, 必须使用flexbox的东西。

 

方法二：利用淡出的效果来曲线救国

.module{
      position: relative;
      height: 3.6em; /* 准确的N行文字的高度 */  
}

.module:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

这种方法得到的不是三个省略号的效果，而是

 

另外： Opera的方式

.module {
     height: 3.6em; /* 准确的n行代码的高度*/
     text-overflow: -o-ellipsis-lastline;
}

 

任何CSS的实现，都有JS来呼应

Clamp.js的方法

// https://github.com/josephschmitt/Clamp.js
var module = document.getElementById("clampjs");
$clamp(module, {clamp: 3});

 

更优美的解决方法：http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/