对于text-overflow:ellipsis,文本超出部分显示...,但要实现这个效果,却有一些必备条件,如下:

div{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
/*其他属性*/
}

三个条件缺一不可,但是这些属性只能实现一行文本显示...,而对于要显示多行文本,并且只有最后一行显示...,就不适用了,所以需要修改样式,如下:

div{
overflow: hidden;
text-overflow: ellipsis;
height: 60px;
display: -webkit-box;
-webkit-line-clamp:; /*可指定任一行显示...效果*/
-webkit-box-orient: vertical;
/*此时不需要white-space:nowrap;*/
}

看到新增的属性,应该就知道,他不是通用的,只针对webkit内核浏览器,而对于最TM神奇的IE浏览器,只能使用插件了,jq插件地址:http://dotdotdot.frebsite.nl/,使用方法,如下:

CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...的更多相关文章

  1. 让script的type属性等于text/html

    type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate&quo ...

  2. JavaScript的type属性等于text/html 例子

    在使用JavaScript标签<script>的时候,其中type最常用的就是text/javascript 其实这个type还有其他用法,下面直接给出例子: type属性为text/ht ...

  3. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

  4. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  5. 如何用javascript获取和设置css3属性

    ==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...

  6. CSS3 属性组参考资料

    CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby ...

  7. CSS3 Media Queries_media queries, css3属性详解

    Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css& ...

  8. 常用CSS3属性整理

    常用CSS3属性整理 文本 文本超出部分折叠 white-space:nowarp; overflow:hidden; text-overflow:ellipsis word-warp 边界换行 no ...

  9. css3 属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容

    css3 属性 text-overflow: ellipsis 前言 正文 结束语 前言 我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替, ...

随机推荐

  1. windows FTP自动下载脚本

    新建ftp.dat文件,内容如下 open xxx.xxx.xxx.xxxusernamepasswordcd    lcd x:\filesbinaryhashmget *.*bye 新建run.b ...

  2. smartctl----硬盘状态监控

    smartmontools介绍 smartmontools是一款开源的磁盘控制,监视工具,可以运行在Linux,Unix,BSD,Solaris,Mac OS,OS/2,Cygwin和Windows上 ...

  3. 洛谷——P1115 最大子段和

    https://www.luogu.org/problem/show?pid=1115#sub 题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 输入文件ma ...

  4. shell脚本监测文件变化

    1. 我使用过的Linux命令之du - 查看文件的磁盘空间占用情况 用途说明 du命令是用来查看磁盘空间占用情况的,在Linux系统维护时常会用到,并且通常与df命令搭配使用.首先使用df看一下各个 ...

  5. osEye.Net:离别是为了将来的重逢

    这一时刻已经成为osEye历史..... 在热心网友的关怀和鼓励之下,osEye.net将继续运行着,感谢你们陪伴osEye一起走过.... 与你相知相恋已经有4个年头了,你的成长到成熟都让我历历在目 ...

  6. Web Service学习-CXF开发Web Service实例demo(一)

    Web Service是什么? Web Service不是框架.更甚至不是一种技术. 而是一种跨平台,跨语言的规范 Web Service解决什么问题: 为了解决不同平台,不同语言所编写的应用之间怎样 ...

  7. Java Secret: Using an enum to build a State machine(Java秘术:用枚举构建一个状态机)

    近期在读Hadoop#Yarn部分的源代码.读到状态机那一部分的时候,感到enmu的使用方法实在是太灵活了,在给并发编程网翻译一篇文章的时候,正好碰到一篇这种文章.就赶紧翻译下来,涨涨姿势. 原文链接 ...

  8. Google C++ style guide——格式

    1.行长度 每一行代码字符数不超过80. 例外: 1)假设一行凝视包括了超过80字符的命令或URL,出于复制粘贴的方便能够超过80字符: 2)包括长路径的能够超出80列,尽量避免: 3)头文件保护能够 ...

  9. Unity3D摄像机尾随人物

    这里的镜头主要是从人物的背后尾随的. 首先新建一个C#脚本,命名为MyFollow,然后把下面代码粘贴进去.保存: using UnityEngine; using System.Collection ...

  10. 用 C 语言编写一个简单的垃圾回收器

    人们似乎觉得编写垃圾回收机制是非常难的,是一种仅仅有少数智者和Hans Boehm(et al)才干理解的高深魔法.我觉得编写垃圾回收最难的地方就是内存分配,这和阅读K&R所写的malloc例 ...