简单的一段文字,截取后只剩一行并添加三个点:运用还是很多的。兼容性相对还好。
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>