多行文本溢出显示省略号(…) 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增加了一些铃声.开 ...
一周排行
  • QPainter painter1(this);//新建类 painter1.setRenderHint(QPainter::Antialiasing,true);//设置反锯齿 painter1.setBrush( ...
  • C#中Property和Attribute的区别 Attribute 字段Property 属性(get;set;) 属性的正常写: private string name; public string Name { ...
  •          最近几天在看java的视频,感觉很多东西java语法上很像c#,但是还是有很多内容惊到我:          1,java虚拟机              用过VMWar或者VirtualBox的童 ...
  • 类别 地址 ZLib c++ zlib(qt)压缩与解压缩 STL STL学习之map容器(2)_insert Basic std::nothrow new (nothrow) T() 的原理 C++ typeid ...
  •   给定平面上一点p(x0,y0),判断该点是否在三角形ABC中,三角形顶点坐标分别为A(xa,xb),B(xb,yb),C(xc,yc).可以使用面积法来判断,方法如下:其中S(A,B,C)表示三角形ABC的面积. ...
  • 与PHP5.3.5的战斗-记php5.3.5安装过程   摘自:http://blog.csdn.net/lgg201/article/details/6125189这篇文章写的很是不错,,,也是我php的成长过程类 ...
  • 2010年6月15日NetBeans 6.9正式版发行,在经过一段时间的使用后,51CTO发现NetBeans IDE 6.9 在 NetBeans IDE 6.8 的基础上进行了大量更新,其中涉及以下改进: ◆使用 ...
  • http://www.iteye.com/problems/44119 http://hi.baidu.com/lapson_85/item/7733586e60b08500a1cf0f8d ———————————— ...
  •             首先说一些编程语言的几个发展阶段:                         下面我们来说说解释与编译它们的区别,在这里我们想用一个简单的.大家熟知的例子来解释:         文言文 ...
  • 易网科技讯 11月3日消息,据国外媒体报道,诺基亚西门子公司3日宣布,公司计划裁减7%至9%的现有员工(约64人),约6名员工,到2011年底减少大约5亿欧元的运营成本.