把多余文字转化为省略号

怎么把多余文字转化为省略号？

 

先看看最简单的，利用 text-overflow:ellipsis 实现单行文本溢出显示省略号效果

1 overflow: hidden;
2 text-overflow: ellipsis;//clip|ellipsis

3white-space: nowrap;

效果如下：

所有主流浏览器都支持 text-overflow 属性。但这个属性仅适用于单行文本，多行的情景远比单行复杂。

 

1.利用 -webkit-line-clamp 属性

width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
border:solid 1px black;

效果图：

看起来代码量不多，也较易理解，将盒子设置成-webkit-box，方向设置为垂直后设定需要的行数 -webkit-line-clamp 即可

缺点是这种方法仅适用于webkit内核或移动端页面。在火狐，ie等浏览器并不支持。

2.用包含省略号(…)的元素模拟实现

思路是设定固定宽高，多余部分隐藏，在结尾用包含省略号（…）的元素覆盖部分内容。

.demo {
    height: 200px;
    width: 200px;
    position:relative;
    line-height:1.4em;
    height:4.2em;
    overflow:hidden;
}
.demo::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 -20px 1px 45px;
    background-color:white;
}

这里用一个包含了省略号，且背景色为白色的伪元素遮盖了部分内容。高度 height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。

这种思路实现较为简单，兼容性也比较好。

ps:如果要兼容ie6或7，则不能使用伪元素，可以使用一个<div>或者<span>标签。如果要支持ie8，需要将::after写成:after。

效果如下：

同样这种方法也存在一些问题

首先是当文字内容有过多标点时容易造成结尾单个字体被遮盖部分的现象。

这点可以将省略号元素的背景颜色设置一个左到右透明加深的特效，并适当增加与文字的距离。或者控制文本内容符号的使用。

其次当文字内容并没有超过固定行数的时候，比如只有一行或者两行时，省略号也会固定显示在div的右下角。

或者文字内容只占据到第三行的中间时，省略号也会固定在右下角并不会跟随在文字的最后。不美观。

可以在div中增加一个p标签，用js判断，当p元素高度达到父元素固定高度时显示省略号元素。

HTML代码：

<div class="demo">
<p>啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊</p>
<div class="demo1">...</div>
</div>

css:

.demo {
    height: 200px;
    width: 200px;
    position:relative;
    line-height:1.4em;
    height:4.2em;
    overflow:hidden;
}
.demo1{
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 -20px 1px 45px;
    background-color:white;
}
p{
    margin: 0;
}

 javascript:

1 if($(".demo p").height()<=$(".demo").height()){
2             $(".demo1").hide();
3         }

 

3.js代码判断字数

//demo为需要切割的div，num为限制字数
1 function cut(demo,num){
2         var str=demo.html();
3         if(str.length>=num){
4             var strN=str.substring(0,num);
5             strN+="...";
6             demo.html(strN);
7         }
8     }

 参考资料：http://www.css88.com/archives/5206