css方式:
单行溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
<style type="text/css">
.test_demo{
text-overflow:ellipsis;//值为clip表示剪切,ellipsis时为显示省略号
overflow:hidden;
white-space:nowrap;
width:200px;
background:#ccc;
}
</style>
</head>
<body>
<div class="test_demo">
超酷的IT技术学习平台(我是省略号)
</div>
</body>
</html>
同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。关于word-wrap:break-word和word-break:break-all,可以看这个网址,很详细:你真的了解word-wrap和word-break的区别吗?
多行溢出
针对webkit内核的浏览器以及Opera浏览器:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
<style type="text/css">
.test_demo{
text-overflow:ellipsis;
overflow:hidden;
width:200px; //指定宽度
background:#ccc;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; //指定显示多少行
}
</style>
</head>
<body>
<div class="test_demo">
超酷的IT技术学习平台(我是省略号术学习平台(我是省略号我是省略号术学习平台(我是省略我是省略号术学习平台(我是省略
</div>
</body>
</html>
对于其他浏览器:比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现
p {
position: relative;
line-height: 1.4em;
height: 4.2em;
overflow: hidden;
}
p::after {
content: "...";
font-weight: bold;
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 1px 45px;
background: url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}
这里注意几点:
height高度正好是line-height的3倍;
结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用…去模拟;
要支持IE8,需要将::after替换成:after;
js插件方式:
更为好用的是使用jQuery插件-jQuery.dotdotdot:
$('.news-left-text').dotdotdot();//先要引入jquery.dotdotdot.js,然后选择文本段落,使用dotdotdot方法