文本溢出显示...

单行文本溢出

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本溢出

方法1（存在兼容性，兼容移动端）

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding-left: r(12);
word-wrap: break-word;   //防止长单词溢出
word-break: break-all;    //防止长单词折行

方法2（伪类实现，只适合已确定超出指定行数的）

p{
  position:relative;
  height: 3em; // 定高，超过两行隐藏
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
}
p::after{
 content:"...";
 font-weight:bold;
 position:absolute;
 bottom:0;
 right:0;
 padding: 0 2px;
 background: -webkit-linear-gradient(left, transparent, #fff 55%);
}

方法3(jQuery.dotdotdot)

参考：Github、官网

$(document).ready(function() {
  $("#wrapper").dotdotdot({
    //  configuration goes here
  });
});

方法4(Clamp.js)

参考：https://github.com/josephschmitt/Clamp.js

var module = document.getElementById("clamp-this-module");

$clamp(module, {clamp: 3});

方法5（ftellipsis.js）

参考：https://github.com/ftlabs/ftellipsis

var element = document.getElementById('my-element');
var ellipsis = new Ellipsis(element);

ellipsis.calc();
ellipsis.set();