多行文本溢出显示省略号(…) textoverflow: ellipsis

关于text-overflow

text-overflow 属性规定当文本溢出包含元素时发生的事情。

默认值: clip
继承性: no
版本: CSS3
JavaScript 语法: object.style.textOverflow="ellipsis"

语法: text-overflow: clipellipsisstring;

描述 
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 #;
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>

效果如下:

 

多行文本溢出显示省略号(…) textoverflow: ellipsis

常见的想要的效果实现了~~细心你会发现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: 14px
10 }

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;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

 

更多相关文章
  • 序     首先声明,本文并不是介绍什么是N层架构,然后给张分层图,最后来一堆代码结束.本文主要是对分层过程中常常让人感到困惑地方的思考,以及最近园子里面讨论异常激烈的一些问题的再讨论.本文从个人经验角度出发,努力尝试来解决这些困惑,欢迎拍砖,但,如果你进行人生攻击,我也只能在心里画个圈圈诅咒你一下 ...
  • 一.概念阐述:Build与Version的区别 在iOS中有两种“版本号”,也就是所谓的version号与build号,如下图所示: 我们用最简洁的语言来区分这两个版本号的区别以及用途如下: Version号:也称为Bundle versions string, sthort.  appstore以 ...
  • 文/Dr.2Myth 9:等数据积累比较多以后,再添加分析和报告事实:基本的分析和报告功能,在数字化项目早期就必须视为一个关键需求在过去的20年里,大家一直关注患者数据收集和存储的电子系统.现在,有了大量可用的电子数据,注意力转移到可用数据的分析上,以期撬动其中的奥秘,提高临床决策.研究和医院管理的 ...
  • 最近很热闹的事情就是MTK手机短信漏洞的曝光,由于购买使用MTK方案的手机现在在市场上占有不小的比重,而且此漏洞几乎对所有MTK手机都有效,个人用户基本不能防止或者补救,所以受影响的范围非常广.经过多方搜集整理,还有本人的测试,果然发现此漏洞真的屡试不爽,特此分享下.   也许很多人在听到“MTK方 ...
  • 下面为自增运算符(自减雷同)的使用方法(即单目运算符) int a1=2,a2=2; int b=(++a1)*2;//等价于a1=a1+1;b=a1*2; int c=(a2++)*2;//等价于a2=a1*2;c=a2+1; 结果: b=6;a1=3; c=4;a2=3; 本文出自 " ...
  • 易网科技与百度新闻联合报道 易网科技讯 9月11日,苹果正式宣布,iOS的最新版本iOS 7将在9月18日正式开始提供下载. 目前支持iOS 7的设备有iPhone 4以后的iPhone 版本.iPad 2以后的版本.iPad mini和第五代iPod touch. 新的iOS 7增加了一些铃声.开 ...
一周排行
  • 易网科技讯 7月8日消息,据国外媒体报道,音乐识别应用程序Shazam日前获得来自墨西哥亿万富翁卡洛斯·斯利姆(Carlos Slim)旗下的美洲电信公司(América Móvil) 的4万美元投资.Shazam首 ...
  • --创建数据库 CREATE DATABASEexample AUTOMATIC STORAGE YES --自动存储 ON 'D:\' DBPATH ON'D:\' --指定数据库控制文件的存储路径,和数据库表数据 ...
  • C114讯 北京时间9月6日下午消息(沈渣渣)原计划于明年一季度举行的英国4G频谱拍卖由于一系列尚未解决的网络分歧恐将延迟,英国通信管理局Ofcom表示,延迟时间可能至2012年的第二季度. 据悉,即使在2012年上 ...
  • 终于要我们评价老师了ps看我那么晚还给老师评价 老师真的挺不错的.这算时总体评价吧 老师是我上大学以来唯一碰到的跟我们下面的同学有互动的,这个在大学里面还能碰到必须要用感激这个词了 老师讲课很投入,总是眉飞色舞/唾沫 ...
  • 谷歌和微软争夺霸战一直热火朝天,其实纵览浏览器.在线搜索.操作系统和广告业务等四大领域,两强尚未分出胜负.关键时刻,"微软收购雅虎的新消息"或许成为改变格局的推动力. 经历了18个月的艰苦谈判,7 ...
  • 目录: [C#小知识]C#中一些易混淆概念总结 --数据类型存储位置,方法调用,out和ref参数的使用[C#小知识]C#中一些易混淆概念总结(二) --构造函数,this关键字,部分类,枚举 [C#小知识]C#中一 ...
  • 思路:对所有路径的速度从小到大排个序,然后枚举高度差就ok...... #include<iostream> #include<cstdio> #include<cstring> ...
  • 1  第1讲.Linux应用与发展(上) 2 3 播放(46) 评论(0) 时长:8 2  第1讲.Linux应用与发展(下) 2 4 播放(21) 评论( ...
  • template模版与Underscore.js 在项目中经常使用的模版是Underscore这个js框架的实用功能. 在html里面设定模板,然后js绑定数据,这样能避免在js中出现非常多的html标签,在项目中表 ...
  • 苹果计划近期推出一项新的活动,让android手机和黑莓手机可以换购新的iPhone,这对广大的非iPhone手机用户来说显然是一个振奋人心的消息.苹果公司将在本周晚些时候开始对专卖店员工进行培训,并在几周内启动这项 ...