CSS 超出长度省略

来源：互联网发布：sql为表创建外键约束编辑：程序博客网时间：2024/05/17 02:13

参考地址：    1、https://segmentfault.com/a/1190000006237977    2、http://www.css88.com/archives/5206    3、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});

0 0