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 前言 正文 结束语 前言 我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替, ...
随机推荐
- PHP开发实战权威指南-读书总结
从今年开始,断断续续学习PHP已经有4个月了.最初,认真学习PHP几天,就弄WordPress搭建了一个个人博客,这也符合技术人的实践理念. 最近,重温PHP开发实战权威指南,做点总结,整理下自己学习 ...
- HDU 2035 不忍直视的水
#include <iostream> #include <cstdio> #include <algorithm> using namespace std; in ...
- hdu5319 Painter(模拟)
题目链接:点击打开链接 题目大意:给一个矩形.有两把刷子,一把刷红色,一把刷蓝色,红色的方向是东南,蓝色的方向是西北,红色加蓝色等于绿色,如今已知这面墙当前的状态.求从白墙到这个状态最少刷了多少次. ...
- tp中使用事务
是什么 事务是为了防止,多个操作,其中有失败,数据有部分被执行成功的时候使用的. 比如,银行,用户转账.张三钱扣了,结果李四钱还增加! 这个时候需要使用事务,确保张三钱扣了,李四的钱也增加,才真正的成 ...
- centos cmake 升级
本以为升级cmake很简单 下载了最新的(3.15),./configure 没问题 make的时候,提示 openssl.c: undefined symbol openssl, openssl-d ...
- QT-解除connect
前言:解除关联. 一.新建工程 二.新建部件 在ui设计界面拖入一个line edit,一个label以及两个button按钮 右键“关联”按钮转到槽,选择clicked(),添加如下代码: void ...
- Five Invaluable Techniques to Improve Regex Performance
Regular expressions are powerful, but with great power comes great responsibility. Because of the wa ...
- Hibernate框架学习(四)——事务
一.回顾事务的概念http://www.cnblogs.com/cxq1126/p/8313600.html 1.特性ACID:原子性.一致性.隔离性.持久性 2.并发问题:脏读.不可重复读.幻|虚读 ...
- http接口服务方结合策略模式实现总结
在项目中,我们经常会使用到http+xml的接口,而且不仅仅的是一个,可能会有多个http的接口需要实时的交互.但是http接口的接收消息的公共部分是一样的,只有每个接口的报文解析和返回报文是不同的, ...
- Unity 已下载工程包存放路径
Mac Finder 中 Shift+Command+G输入后回车 ~/Library/Unity/Asset Store-5.x Windows 么有,自己上别的网站查去~