CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...
对于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,指定多行文本中任意一行显示...的更多相关文章
- 让script的type属性等于text/html
type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate&quo ...
- JavaScript的type属性等于text/html 例子
在使用JavaScript标签<script>的时候,其中type最常用的就是text/javascript 其实这个type还有其他用法,下面直接给出例子: type属性为text/ht ...
- 实用的CSS3属性和使用技巧
CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...
- 【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...
- 如何用javascript获取和设置css3属性
==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...
- CSS3 属性组参考资料
CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby ...
- CSS3 Media Queries_media queries, css3属性详解
Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css& ...
- 常用CSS3属性整理
常用CSS3属性整理 文本 文本超出部分折叠 white-space:nowarp; overflow:hidden; text-overflow:ellipsis word-warp 边界换行 no ...
- css3 属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容
css3 属性 text-overflow: ellipsis 前言 正文 结束语 前言 我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替, ...
随机推荐
- 原生js,一些小应用(逢10进一,生成V字,多个div抖动)
第一题:每隔10个div换一行.并且鼠标移入 改变opacity. <!DOCTYPE html> <html lang="en"> <head> ...
- SpringBoot 配置 @ConfigurationProperties 与 @Value 区别
一.SpringBoot 配置 @ConfigurationProperties 与 @Value 区别 配置文件 yml 还是 properties 他们都能获取到值: 如果说,我们只是在某个业务逻 ...
- DOM中元素节点,属性节点,文本节点的理解
节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可 ...
- RobotFrameWork+APPIUM实现对安卓APK的自动化测试----第二篇【原理】
http://blog.csdn.net/deadgrape/article/details/50574459 接着上一篇,我们开始聊聊APPIUM的框架和运行模式.废话不多说直接上图. 1.首先自动 ...
- 分享一些 Java 后端的个人干货
学习 Java 也有了不少时间,入 Java 后台的坑也有了一段时日.这段时间里,听过许多前辈的经验与分享,也看过许多大佬的文章和作品.找了个时间整理和总结了一下我个人到目前为止一路以来的听到看到或者 ...
- coalesce函数-返回参数中第一个非null值
coalesce函数-返回参数中第一个非null值 学习了:http://www.cnblogs.com/zc_0101/archive/2009/08/11/1543650.html 这个要复杂一些 ...
- Python标准库:内置函数callable(object)
假设对象object參数是能够调用的对象,就返回True.否则返回False.只是要注意的是,当一个对象是能够调用的.并不表示调用该对象时运行一定成功,但不可调用的对象去调用时一定不会成功.假设类对象 ...
- HttpClient 4.4 请求
4.2 版本 /** * url 请求 paramUrl * * @time 2015年11月10日下午4:40:22 * @packageName com.rom.utils * @param ur ...
- 一步一步跟我学习hadoop(5)----hadoop Map/Reduce教程(2)
Map/Reduce用户界面 本节为用户採用框架要面对的各个环节提供了具体的描写叙述,旨在与帮助用户对实现.配置和调优进行具体的设置.然而,开发时候还是要相应着API进行相关操作. 首先我们须要了解M ...
- 大型Web 站点 Asp.net Session过期你怎么办
在 WEB 系统中. 我们通常会用session来保存一些简单可是却非常重要的信息.比方Asp.net中常常会用Session来保存用户登录信息,比方UserID.为了解决 WEB场大家採用了把ses ...