对于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. IIS部署ASP.NET网站后提示只有在配置文件或 Page 指令中将 enableSessionState 设置为 true 时,才能使用会话状态...

    今天,在IIS上部署网站后,出现了下面错误: 只有在配置文件或 Page 指令中将 enableSessionState 设置为 true 时,才能使用会话状态.还请确保在应用程序配置的 <sy ...

  2. spring 组件注册

    一.声明配置类和注册 bean /** * 配置类 == applicationContext.xml 配置文件 * @author Administrator * */ //@Configurati ...

  3. CF49A Sleuth

    CF49A Sleuth 题目描述 Vasya plays the sleuth with his friends. The rules of the game are as follows: tho ...

  4. NHibernate之旅(18):初探代码生成工具使用

    本节内容 引入 代码生成工具 结语 引入 我们花了大量的篇幅介绍了相关NHibernate的知识.一直都是带着大家手动编写代码,首先创建数据库架构.然后编写持久化类和映射文件,最后编写数据操作方法.測 ...

  5. [ACM] POJ 2154 Color (Polya计数优化,欧拉函数)

    Color Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7630   Accepted: 2507 Description ...

  6. Linux 下安装 jdk-7u79-linux-x64.gz,jdk1.7.0_79,jdk1.7步骤:

    1.首先下载对应CentOS版本的jdk:这里我下载的是jdk-7u79-linux-x64.tar.gz 2.上传到CentOS下的目录中 3.新建一个APP目录作为存储jdk的目录 4.解压jdk ...

  7. 英语发音规则---D字母

    英语发音规则---D字母 一.总结 一句话总结: 1.D发[d]音? doctor ['dɒktə] n. 医生:博士 bread [bred] n. 面包:生计 hand [hænd] n. 手,手 ...

  8. 杂项-公司:Altera

    ylbtech-杂项-公司:Altera 自二十年前发明世界上第一个可编程逻辑器件开始,Altera公司(阿尔特拉)(NASDAQ:ALTR)秉承了创新的传统,是世界上“可编程芯片系统”(SOPC)解 ...

  9. Java语言的优点

    1)Java为纯面向对象的语言. <Thinking in Java>提到Java语言是一种“Everything is object”的语言,它能够直接反应现实生活中的对象, 例如火车, ...

  10. ROS集成开发环境RoboWare Studio安装教程

    前言:很多人说vim是最快的,所以我选择用roboware. ROS 自带的编辑器vim增加插件,效果如下: RoboWare Studio,效果如下: 下面开始安装. 一.安装 去官网 http:/ ...