# 单行
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
# 多行
| overflow : hidden; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
# 跨浏览器兼容的方案
| p { |
| position:relative; |
| line-height:1.4em; |
| |
| height:4.2em; |
| overflow:hidden; |
| } |
| p::after { |
| content:"..."; |
| font-weight:bold; |
| position:absolute; |
| bottom:0; |
| right:0; |
| padding:0 20px 1px 45px; |
| background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y; |
| } |
# JavaScript 方案
# 1.Clamp.js
下载及文档地址：https://github.com/josephschmitt/Clamp.js
| var module = document.getElementById("clamp-this-module"); |
| $clamp(module, {clamp: 3}); |
# 2.jQuery 插件 - jQuery.dotdotdot
| $(document).ready(function() { |
| $("#wrapper").dotdotdot({ |
| |
| }); |
| }); |
下载地址:https://github.com/FrDH/dotdotdot-js
详细文档地址:https://dotdotdot.frebsite.nl/
