多行文本溢出显示省略号(…) 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增加了一些铃声.开 ...
一周排行
  • 转自:http://blog.sina.com.cn/s/blog_4c197d420101fbl9.html 查看所有库的大小 mysql> use information_schema; Database ...
  • 在一个交换网络里,您如何确定从哪里开始动手查找问题?想深入"透视"一个交换网络是非常困难的.首先,在2层交换的时候还是桥接转发方式,但到了3层交换却有了更高级的特性和转发规则,例如VLAN.到了4 ...
  • 面向对象JS开发--封装 6 5   在web页面的客户端应用中,js已经成为不可缺少的部分.传统方式对js的应用完全基于过程模型,在这种模型里,普通语句及全局函数的使用最为普遍.当 代码的 ...
  • 内容提要:Hiberfil.sys文件的存在会使得系统无法完成一次全面的磁盘碎片整理,本文将介绍如何在磁盘碎片整理前先删除Hiberfil.sys文件. 现在许多Windows XP用户已经习惯于使用系统提供的休眠功 ...
  • 工作:设计S5pv210/Exynos4412 工控板/游戏机主板/手持机PDA/广告机主板 wince/android 方案 并在QQ群:27100460  组织开发者/方案需求者共同探讨S5pv210/Exyno ...
  • 数组指针 与 指针数组 是一对容易混淆的概念.数组指针,例如: int (*p)[n]; 为了好理解,我将它称为: 数组型的指针. 如果说是 int 型的指针,则 p++ 时 p 的地址增加 4:数组型的 p,执行 ...
  • 我以前在csdn上开通了博客,因为我一直在linux下开发,浏览器用的是firefox 刚开通的时间,显示挺正常的,可是后来突然就不能正常显示了,页面总弹出错误,提示页面错误或不存在,系统将会在3秒后自动跳动到csd ...
  • 请编制程序,其功能是:剔除10个8位无符号二进制数据中的最大值和最小值,然后按四舍五入原则计算其余8个数据的算术平均值.将晚剔除最大值和最小值之后的8个数据依次存入指定的内存区域中,并在其后存放平均值. 例如: 内存 ...
  •   研究生要毕业了,最近要开始找工作,随便翻看一下基础知识. 逻辑操作符和位操作符都是操作符分类中的一种. 说明两个问题: 第一:短路逻辑操作符和非短路逻辑操作符的区别         短路逻辑与(&& ...
  • [越努力,越幸运] 一个人经历的越多,他会思考的越多.越是优秀越是努力,这一现象的根因在于,优秀的人总能看到比自己更好的,而平庸的人总能看到比自己更差的.真的努力后你会发现自己要比想象的优秀很多.记住一句话:越努力, ...