原文出处:http://blog.csdn.net/billfeller/article/details/40436491?utm_source=tuicool
不做前端很久了,今天从重构师那里了解到CSS3已经可以实现很多以往必须通过JS才能实现的效果,如渐变,阴影,自动截断文本展示省略号等等强大效果,而且这些功能日渐成熟,已经大量用于生产环境。H5真的日渐成熟了,得恶补下了。
以下分享实现指定文本超出部分以省略号展示的Demo:
<span class="sc2"><<a target=_blank target="_blank" href="http://december.com/html/4/element/style.html" style="text-decoration: none; color: rgb(43, 115, 183); outline: none;"><span class="kw2" style="color: rgb(0, 0, 0); font-weight: bold;">style</span></a>></span>
.text1 {
width:200px;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
white-space:nowrap;
}
.text2 {
width:200px;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
<span class="sc2"><<span class="sy0" style="color: rgb(102, 204, 102);">/</span><a target=_blank target="_blank" href="http://december.com/html/4/element/style.html" style="text-decoration: none; color: rgb(43, 115, 183); outline: none;"><span class="kw2" style="color: rgb(0, 0, 0); font-weight: bold;">style</span></a>></span>
<span class="sc2"><<a target=_blank target="_blank" href="http://december.com/html/4/element/div.html" style="text-decoration: none; color: rgb(43, 115, 183); outline: none;"><span class="kw2" style="color: rgb(0, 0, 0); font-weight: bold;">div</span></a> <span class="kw3" style="color: rgb(0, 0, 102);">class</span><span class="sy0" style="color: rgb(102, 204, 102);">=</span><span class="st0" style="color: rgb(255, 0, 0);">"text1"</span>></span>热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个<span class="sc2"><<span class="sy0" style="color: rgb(102, 204, 102);">/</span><a target=_blank target="_blank" href="http://december.com/html/4/element/div.html" style="text-decoration: none; color: rgb(43, 115, 183); outline: none;"><span class="kw2" style="color: rgb(0, 0, 0); font-weight: bold;">div</span></a>></span>
<span class="sc2"><<a target=_blank target="_blank" href="http://december.com/html/4/element/br.html" style="text-decoration: none; color: rgb(43, 115, 183); outline: none;"><span class="kw2" style="color: rgb(0, 0, 0); font-weight: bold;">br</span></a> <span class="sy0" style="color: rgb(102, 204, 102);">/</span>></span>
<span class="sc2"><<a target=_blank target="_blank" href="http://december.com/html/4/element/div.html" style="text-decoration: none; color: rgb(43, 115, 183); outline: none;"><span class="kw2" style="color: rgb(0, 0, 0); font-weight: bold;">div</span></a> <span class="kw3" style="color: rgb(0, 0, 102);">class</span><span class="sy0" style="color: rgb(102, 204, 102);">=</span><span class="st0" style="color: rgb(255, 0, 0);">"text2"</span>></span>热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个<span class="sc2"><<span class="sy0" style="color: rgb(102, 204, 102);">/</span><a target=_blank target="_blank" href="http://december.com/html/4/element/div.html" style="text-decoration: none; color: rgb(43, 115, 183); outline: none;"><span class="kw2" style="color: rgb(0, 0, 0); font-weight: bold;">div</span></a>></span>
如下图:
原文出处:http://www.css88.com/archives/5206
大家应该都知道用text-overflow:ellipsis
属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width
属性。
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。
WebKit浏览器或移动端的页面
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp
;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
-webkit-line-clamp
用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:
display: -webkit-box;
必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient
必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。text-overflow: ellipsis;
,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
- overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。
具体例子可以查看http://www.css88.com/webkit/-webkit-line-clamp/
跨浏览器兼容的方案
比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;
例如:
- p {
- position:relative;
- line-height:1.4em;
- /* 3 times the line-height to show 3 lines */
- 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;
- }
看demo:
这里注意几点:
- height高度真好是
line-height
的3倍; - 结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
- IE6-7不显示
content
内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用<span class="line-clamp">...</span>
去模拟; - 要支持IE8,需要将
::after
替换成:after
;
JavaScript 方案
用js也可以根据上面的思路去模拟,实现也很简单,推荐几个做类似工作的成熟小工具:
1.Clamp.js
下载及文档地址:https://github.com/josephschmitt/Clamp.js
使用也非常简单:
- var module = document.getElementById("clamp-this-module");
- $clamp(module, {clamp: 3});
DEMO:
2.jQuery插件-jQuery.dotdotdot
这个使用起来也很方便:
- $(document).ready(function() {
- $("#wrapper").dotdotdot({
- // configuration goes here
- });
- });
下载及详细文档地址:https://github.com/BeSite/jQuery.dotdotdot或http://dotdotdot.frebsite.nl/
参考:
http://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/#what-can-we-do-across-browsers
http://css-tricks.com/line-clampin/
相关视频课程推荐《站长必修课:网站是怎样做出来的?》https://edu.51cto.com/sd/3be5b