博客很久没有更新了，最近博客中毒了，修复了很久。ASP的后台受不了伤，最近准备升级后台，做PHP。今天想说一下“文字溢出显示采用省略号处理方法”。
我们经常遇到太多的文字，需要隐藏。有很多方法可以设置height，然后使用overfloww:hidden。text也可以设置-overflow:ellipsis属性实现单行文本溢出显示省略号(..)。当然，有些浏览器还需要加宽width属性，CSS如下：
.hide{overflow:hidden;text-overflow: ellipsis;white-space: nowrap}
我们发现我们使用whitetet-space: nowrap【不换行】这个属性说明这个方法不支持多行。还有其他的方法，所以我在CSS88上看到了一种方法，如下：
WebKit浏览器或移动页面：
在WebKit浏览器或移动终端(绝大多数是WebKit核心浏览器)的页面实现相对简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注：这是一个 属性不规范（unsupported WebKit property），它没有出现 CSS 在规范草案中。
-webkit-line-用于限制一个块元素显示的文本行数的clamp。
-webkit-line-用于限制一个块元素显示的文本行数的clamp。 为了实现这种效果，它需要结合其他WebKit属性。
常见的组合属性：
■ display: -webkit-box; 属性必须结合 ，显示对象作为弹性伸缩箱的模型 。
■ -webkit-box-orient 属性必须结合 ，设置或检索伸缩箱对象子元素的排列 。
■ text-overflow: ellipsis;，在多行文本的情况下，可以使用省略号“…”隐藏超出范围的文本 。
CSS如下：
.hide{overflow : hidden;text-overflow:ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
本属性更适用于WebKit浏览器或移动终端(绝大多数是WebKit核心)浏览器。
跨浏览器兼容方案：
更可靠、更简单的方法是设置相对定位的容器高度，模拟包含省略号(..)的元素，CSS如下；
- p {
- position:relative;
- line-height:1.4em;
- /* 3 times the line-height to show 3 lines */
- height:4.2em;
- overflow:hidden;
- }
- p::after {
- content:”…”;
- font-weight:bold;
- position:absolute;
- bottombottom:0;
- rightright:0;
- padding:0 20px 1px 45px;
- background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
- }
这里要注意几点：
■ height的高度真的是line-height的三倍；
■ 最后的省略很容易使用半透明的png来减少效果，或设置背景颜色；
■ Content内容不显示IE6-7，因此兼容IE6-7可以在内容中添加一个标签，比如用<span class=”line-clamp”>…</span>去模拟；
■ 需要支持IE8：:替换after：after；
JavaScript 方案：
js也可以根据上述思路进行模拟，实现起来也很简单，推荐几种成熟的工作工具：
方法一：Clamp.js
下载及文件地址：https://github.com/josephschmitt/Clamp.js
使用也很简单，代码如下：
var module = document.getElementById(“clamp-this-module”);
$clamp(module, {clamp: 3});
方法二:jquery插件-jQuery.dotdotdot
下载及详细文档地址：https://github.com/BeSite/jQuery.dotdotdot 或 http://dotdotdot.frebsite.nl/
JS代码如下：
- $(document).ready(function() {
- $(“#wrapper”).dotdotdot({
- });
- });
总结：
方法有很多种，可以灵活运用。
