CSS 超出长度省略

本文主要是介绍CSS 超出长度省略，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

更多内容： http://blog.yuhai.win

参考地址：1、https://segmentfault.com/a/11900000062379772、http://www.css88.com/archives/52063、https://github.com/josephschmitt/Clamp.js案例代码：1、https://github.com/yuhaizr/htmlexample/commit/f9f3076a78ee796262e84469b40a79a9063c2c70

单行省略

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

text-overflow:ellipsis 可以实现单行文本溢出显示省略号，部分浏览器还需要加宽度width属性。

多行省略号

WebKit 浏览器或者移动端的页面

1、可以使用WebKit的CSS扩展属性 -webkit-line-clamp（不规范属性）。

2、-webkit-line-clamp 用来限制一个块元素显示的文本行数，他需要组合其他webkit属性。

3、display:-webkit-box 将对象作为弹性伸缩合作模型显示

4、 -webkit-box-orient 设置或者检索伸缩盒对象的子元素的排列方式

5、 text-overflow：ellipsis 可以用来多行文本的情况下，用省略号 “…” 隐藏超出范围文本。

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

夸浏览器兼容方案

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;
}

1、height高度真好是line-height的3倍；

2、结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；

3、IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用…去模拟；

4、要支持IE8，需要将::after替换成:after；

Clamp.js 的使用

<p id='clamp-this-module'>前端样式文案前端样式文案前端样式文案前端样式文案前端样式文案前端样式文案前端样式文案前端样式文案前端样式文案</p>var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 1});

这篇关于CSS 超出长度省略的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---