多行文本溢出显示省略号(…) text-overflow: ellipsis
来源:互联网 发布:mysql删除语句怎么写 编辑:程序博客网 时间:2024/06/10 02:11
关于text-overflow
text-overflow 属性规定当文本溢出包含元素时发生的事情。
语法: text-overflow: clip|ellipsis|string;
这里主要说说 text-overflow: ellipsis;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div.test 6 { 7 white-space:nowrap; 8 width:12em; 9 overflow:hidden; 10 border:1px solid #000000;11 }12 </style>13 </head>14 <body>15 16 17 <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>18 19 20 </body>21 </html>
效果如下:
常见的想要的效果实现了~~细心你会发现text-overflow:ellipsis; 不可独立使用必须结合overflow:hidden; white-space:nowrap;才生效。
然而white-space:nowrap; 是指不换行,就是说只能一行显示。
但是有时我们想要实现多行的情况下,在最后一行的最后用“…”来表示。
多行显示text-overflow: ellipsis
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <p>多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示</p> 9 10 </body>11 </html>
css如下
1 p{ 2 width:200px; 3 height: 32px; 4 overflow: hidden; 5 text-overflow: ellipsis; 6 display: -webkit-box; 7 -webkit-line-clamp: 2; 8 -webkit-box-orient: vertical; 9 font-size: 14px10 }
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;
,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
- 多行文本溢出显示省略号(…) text-overflow: ellipsis
- 多行文本溢出显示省略号…
- text-overflow:ellipsis溢出文本显示省略号的详细方法
- text-overflow:ellipsis,让溢出文本显示省略号
- 使用text-overflow:ellipsis对溢出文本显示省略号
- 使用 text-overflow: ellipsis 实现溢出文本省略号显示
- 多行文本超出时显示省略号----jquery.ellipsis.js
- 多行文本溢出显示省略号...
- WebKit多行文本溢出显示省略号(...)
- 多行文本溢出显示省略号
- 单行/多行文本溢出,显示省略号
- css多行文本溢出显示省略号...
- css3 多行文本溢出显示省略号
- 多行文本溢出显示省略号
- 多行文本溢出显示省略号:
- 实现多行文本溢出显示省略号
- 多行文本溢出显示省略号(…)全攻略
- 多行文本溢出显示省略号(…)全攻略 汇总
- hadoop lib native
- centos6.5 CDH5.6 clouder 集群环境搭建
- c++if语句和关系表达式
- Redis大总结之一:Redis 五大数据类型及操作
- Cassandra 2.0.4 cannot start
- 多行文本溢出显示省略号(…) text-overflow: ellipsis
- 私网分配IP时是否能使用公网IP
- mysql Access denied
- Linux中文件的可读,可写,可执行权限的解读以及chmod,chown,chgrp命令的用法
- MPAndroidChart绘制浅析
- LeetCode : Palindrome Number
- Spring普通类获取并调用Spring service方法
- hadoop大数据平台手动搭建(一)-ssh,ntp
- 利用MyBatis Generator自动创建代码