多行文本溢出显示省略号(…) text-overflow: ellipsis
2015-08-05 22:34
627 查看
关于text-overflow
text-overflow 属性规定当文本溢出包含元素时发生的事情。
语法: text-overflow: clip|ellipsis|string;
这里主要说说 text-overflow: ellipsis;
效果如下:
常见的想要的效果实现了~~细心你会发现text-overflow:ellipsis; 不可独立使用必须结合overflow:hidden; white-space:nowrap;才生效。
然而white-space:nowrap; 是指不换行,就是说只能一行显示。
但是有时我们想要实现多行的情况下,在最后一行的最后用“…”来表示。
多行显示text-overflow: ellipsis
css如下
demo效果:http://jsbin.com/depogojufi/edit?html,css,output
这里用了一个不是很常见的属性 -webkit-line-clamp
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)
常见结合属性:
text-overflow 属性规定当文本溢出包含元素时发生的事情。
默认值: | clip |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.textOverflow="ellipsis" |
值 | 描述 | |
---|---|---|
clip | 修剪文本。 | |
ellipsis | 显示省略符号来代表被修剪的文本。 | |
string | 使用给定的字符串来代表被修剪的文本。 |
<!DOCTYPE html> <html> <head> <style> div.test { white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000; } </style> </head> <body> <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div> </body> </html>
效果如下:
常见的想要的效果实现了~~细心你会发现text-overflow:ellipsis; 不可独立使用必须结合overflow:hidden; white-space:nowrap;才生效。
然而white-space:nowrap; 是指不换行,就是说只能一行显示。
但是有时我们想要实现多行的情况下,在最后一行的最后用“…”来表示。
多行显示text-overflow: ellipsis
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示</p> </body> </html>
css如下
p{ width:200px; height: 32px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px }
demo效果:http://jsbin.com/depogojufi/edit?html,css,output
这里用了一个不是很常见的属性 -webkit-line-clamp
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)
-webkit-line-clamp;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:
1,display: -webkit-box;必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
2,-webkit-box-orient必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
3,text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
相关文章推荐
- Scala 深入浅出实战经典 第49课 Scala中Variance代码实战(协变)
- 乙未年六月廿一 学习笔记
- 树莓派实战2:发送ip地址到自己邮箱
- CodeForces 46D Parking Pot(线段树区间更新)
- ios8 UITableView设置 setSeparatorInset:UIEdgeInsetsZero不起作用的解决办法
- WPF和Windows Phone Post组装函数
- rewrite(摘自Yii2)
- swift学习1 oc swift混编
- 增加eclipse的内存
- ubuntu服务管理
- [转载] iOS开发 - 封装文件上传工具类
- SPOJ--K-query (线段树离线) 离线操作解决一些问题
- leetcode Balanced Binary Tree 题解
- NYOJ 33 蛇形填数
- Java笔试面试题001
- Cordova android框架详解
- 深入集合框架之HashSet源码剖析
- YUV格式学习:YUV420P、YV12、NV12、NV21格式转换成RGB24
- MS Project 使用之创建项目信息
- 企业应用开发面临的问题以及思考