多行文本溢出显示省略号(…) 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增加了一些铃声.开 ...
一周排行
  • 易网科技讯 9月20日消息,中国移动今天公布的最新运营数据显示,2012年8月,中国移动用户新增512.2万户,其中TD用户新增316万户.截至2012年8月底,中国移动用户总数接近6.93亿户,在网TD用户总数达到 ...
  • 本报讯 (记者 王海艳)昨日,美菱公布了非公开发行股份预案,拟以不低于10.18元/股的价格非公开发行不少于0.5亿股且不超过1.3亿股.其中,四川长虹拟以现金4亿元认购此次非公开发行股票. 公告表示,此次募集资金主 ...
  •     Cisco公司最近正式向外界公布了最新的认证程序,这就是CCNS--Cisco Content Networking Specialist--Cisco内容联网专家. 为了成为一名CCNS你需要预先持效的CC ...
  •   http://train.chinaitlab.com/news/527412.html 按照惯例,经历了"十一黄金周"的火热以后,IT职场将会进入一个招聘求职的小高潮,据上半年IT人才需求的 ...
  • How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...
  • window下命令powercfg /change "Home/Office Desk" /moniter-timeout-ac 1C#中实现[DllImportAttribute("u ...
  • <%%>是说这里面的文本不是普通直接输出到客户端的文本,而是需要服务器来解释的.不光是可以写JAVA脚本,这要看具体服务器端使用的是什么技术ASP/JSP/PHP/ASP.NET都使用相同或相似的技术. ...
  • oracle外部表实现导入大文本数据   1,首先创建文件存放路径 create or replace directory phone_dir   as 'E:\Oracledir'; 如果不是在当前用户下创建目录, ...
  • synchronized 关键字的基本知识 :对synchronized 方法所对应的对象加锁.很好理解. 比如一个类 有2个方法 a 和 b.2个方法都是synchronized 方法.那么当有线程 访问其中的一个 ...
  • 没有难度,直接上代码了 / * * @param fileName */ public static void createXmlUtf_8(String fileName) { Element root = Doc ...