<!--此处的样式并不必须-->
<div class="wrap" style="width:200px;border:1px solid red;">这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。</div>
效果1：单行显示不换行，超出部分用省略号代替
.wrap {
/* 超出的文本隐藏 */
overflow:hidden;
/* 溢出不换行 */
white-space:nowrap;
/* 溢出用省略号显示 */
text-overflow:ellipsis;
}
效果2：多行文本显示，此处显示2行，超出部分用省略号代替
方法1：使用webkit的css扩展属性
注：该方法适用于Safari、chrome和大多数移动端浏览器，但在ie等旧版浏览器下不支持。
.wrap {
/* 将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 设置子元素排列方式 */
-webkit-box-orient: vertical;
/* 设置显示的行数，多出的部分会显示为... */
-webkit-line-clamp: 2;
}
方法2：使用伪元素实现，将伪元素放在最后一个字的上方，达到显示省略号的目的。
注：该方法兼容性较好，但文字未超出的情况下也会出现省略号。需要结合js优化
.wrap{
/* 超出的文本隐藏 */
overflow: hidden;
position: relative;
/* line-height X 显示行数 = max-height */
line-height: 20px;
max-height: 40px;
/* 设置文本为两端对齐 */
text-align: justify;
}
.wrap:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
/* 将省略号的大小设置为1个字体稍大一些的宽度，可以根据覆盖效果自己设置 */
width: 16px;
text-align: center;
/* 设置背景，将最后一个字覆盖掉 */
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -moz-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(left, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
优:1：由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）
<div class=”wrap p-after” style=”width:200px;border:1px solid red;”>这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。<span>…</span></div>
优化2：兼容ie8需要将::after替换成:after。
优化3：js判断是否展示省略号
<div class="wrap p-after" style="width:200px;border:1px solid red;">这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。<span>...</span></div>
.wrap{
/* 超出的文本隐藏 */
overflow: hidden;
position: relative;
/* line-height X 显示行数 = max-height */
line-height: 20px;
max-height: 40px;
/* 设置文本为两端对齐 */
text-align: justify;
}
/* 结合要兼容的浏览器类型，设置显示后的样式 */
.p-after span{
position: absolute; bottom: 0; right: 0;
display:inline-block; width: 16px;
text-align: center;
background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -moz-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(left, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%);
}
$(function(){
$('wrap').each(function(i, obj){
//获取文本的行高，并获取文本的高度
var lineHeight = parseInt($(this).css("line-height"));
var height = parseInt($(this).height());
//规定的行数是2行，那么对超过行数的部分进行限制高度，并加上省略号
if((height / lineHeight) > 2 ){
$(this).addClass("p-after")
}else{
$(this).removeClass("p-after");
}
});
})
方法3：使用js脚本控制
- 监听DOM尺寸变化
- 判断是否溢出 scrollHeight > offsetHeight
- 二分查找多行截取字符临界值（算法的解法：判断字符串是否溢出，二分查找字符串溢出临界子串，控制…显示）
<div class=”wrap” style=”width:200px;border:1px solid red;”>这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。这是一段超长文本。<span>…</span></div>
<style>.wrap{line-height: 20px; height:40px;} </style>
<script type="text/javascript">
$(function() {
//定义一个空数组
var content_arr = [];
//遍历box内容
$('.wrap').each(function() {
//去掉前后文空格
var content = $.trim($(this).text());
//内容放进数组
content_arr.push(content);
})
//遍历循环数组
for (var i = 0; i < content_arr.length; i++) {
//如果数组长度（也就是文本长度）>=50（数字可自己定义）
if (content_arr[i].length >= 50) {
//添加省略号并放进box文字内容后面
content = content_arr[i].substr(0, 50) + '...';
$(".wrap").eq(i).text(content);
} else {
content = content_arr[i];
$(".wrap").eq(i).text(content);
}
}
})
</script>
插件：
clamp.js
jQuery.dotdotdot
(对于这两个插件我没有尝试过，所以就先不介绍了，在网上了解到运用此插件可以兼容IE和FF)
附件一：