简单的一段文字，截取后只剩一行并添加三个点：运用还是很多的。兼容性相对还好。
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
white-space:nowrap;
有难度的是：想要两行或者多行，超出部分添加...
先说纯css如何截取一长段文字为限定宽度并添加...
<span style="font-size:18px;"> .p1 {
overflow : hidden;//超出部分隐藏
text-overflow: ellipsis;//文字超出部分截断
display: -webkit-box;//显示为webkit的盒子，这是css3新增的属性，很有用，可以进行弹性的分配。
-webkit-line-clamp: 2;//行数：2，也可以尝试其他行数
-webkit-box-orient: vertical;//分配的盒子的方向，水平。
}</span>代码就不贴了，直接看附件解压用chrome等webkit内核的浏览器即可。
然后要说的是，呵呵，这个私有属性据说有bug，还没遇到。
最后要说的是，兼容方案，业内主流处理方式是
- 后台截取后传递带...的字符串；
- 不截取，直接限定其最大高度，或者干脆限死其高度，超出部分不显示，也就没有...了；
- 写段js进行兼容如果字符串的长度超出多少，截取从0到限定的长度的内容并添加...
<span style="font-size:18px;"> var text = document.getElementById('txt');
var str = text.innerHTML;
if(str.length > textLeng ){
text.innerHTML = str.substring(0,textLeng )+"...";
</span>
最后附上 一个测试html，仅供参考：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ellipsis截取并添加...</title>
<style>
.p1 {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
display:-moz-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<p class="p1">自动撒果，支持自编程面包机~PETRUS柏翠是国内新兴的电器品牌，主要以制造各种西式精品健康家电商品而闻名。这款货号为PE6280的面包机，此款带有自动撒果技术，做带有果仁类面包时更加方便，iMix冰淇淋功能，冰淇淋桶需要单买；触摸式控制，支持自编程，可以根据自动撒果，支持自编程面包机~PETRUS柏翠是国内新兴的电器品牌，主要以制造各种西式精品健康家电商品而闻名。这款货号为PE6280的面包机，此款带有自动撒果技术，做带有果仁类面包时更加方便，iMix冰淇淋功能，冰淇淋桶需要单买；触摸式控制，支持自编程，可以根据</p>
<p class="p2" id="txt">自动撒果，支持自编程面包机~PETRUS柏翠是国内新兴的电器品牌，主要以制造各种西式精品健康家电商品而闻名。这款货号为PE6280的面包机，此款带有自动撒果技术，做带有果仁类面包时更加方便，iMix冰淇淋功能，冰淇淋桶需要单买；触摸式控制，支持自编程，可以根据自动撒果，支持自编程面包机~PETRUS柏翠是国内新兴的电器品牌，主要以制造各种西式精品健康家电商品而闻名。这款货号为PE6280的面包机，此款带有自动撒果技术，做带有果仁类面包时更加方便，iMix冰淇淋功能，冰淇淋桶需要单买；触摸式控制，支持自编程，可以根据</p>
<script>
window.onload = function(){
var text = document.getElementById('txt');
var str = text.innerHTML;
textLeng = 100;
if(str.length > textLeng ){
text.innerHTML = str.substring(0,textLeng )+"... ...";
}
}
</script>
</body>
</html>
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
