多行文本溢出显示省略号(…) 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增加了一些铃声.开 ...
一周排行
  • 过去的一段时间里,忙于考试.忙于完成实验室要求的任务.更忙于过年,很长时间没有以一种良好的心态来回忆.总结自己所学的东西了.这几天总在想,我应该怎么做.后来我才明白,应该想想我现在该做什么,所以我开始写这篇博客了.这 ...
  • 国外媒体报道,据赛门铁克日前公布的<互联网安全威胁>报告显示,今年上半年,亚太地区42%来自中国. 报告显示,今年上半年,来自中国的恶意代码.垃圾邮件病毒.蠕虫和网络攻击占到了亚太地区(日本在内)的42% ...
  • 易网科技讯  9月7日消息,据路透社报道,TechCrunch创始人和前主编迈克尔·阿灵顿(Michael Arrington)日前表示,希望从AOL手中拿回公司.他在该网站发表文章称,AOL现在面临两种选择:要么将 ...
  •   如何挑选适合的前端框架:http://www.html5cn.org/article-.html 模块化开发三阶段: 第一阶段:在一个CSS文件中把多个页面按自己的习惯顺序从上往下编写样式,基本不考虑 ...
  • 素数环  题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=84562#problem/C    题意: 输入正整数n,把整数1~n组成一个环,使相 ...
  • 11月29日消息,据台湾媒体报道,HTC今年营运走下坡,影响2013年台湾20大国际品牌名单排名表现,华硕今年登基成功,挤下去年度冠军HTC,HTC因品牌价值大幅缩水,名落第4名.2013台湾20大国际品牌得奖名单出 ...
  • 韩国宪法法院昨天做出裁决,8名法官均认定网络实名制违背了宪法.据韩国媒体报道,韩国有关促进利用信息通信网及保护信息的法律第44条第1项规定,日均用户逾10万人次的互联网网站留言板的用户需在注册个人信息后才能发帖.有部 ...
  • 前面三节已经对CUDA做了一个简单的介绍,这一节开始真正进入编程环节. 首先,初学者应该对自己使用的设备有较为扎实的理解和掌握,这样对后面学习并行程序优化很有帮助,了解硬件详细参数可以通过上节介绍的几本书和官方资料获 ...
  •   平时帮朋友们配置过一些PHP环境的服务器,但是一直使用的都是Apache HTTP+PHP,今天呢,我吧IIS+PHP配置方式给大家发一下下~.   在这里,我使用的是FastCGI模块映射的方式配置的,当然还有 ...
  • 来自:http://blog.csdn.net/sara_yhl/article/details/6850107 导出 select * from test_info into outfile '/tmp/test. ...