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 前言 正文 结束语 前言 我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替, ...
随机推荐
- Tensorboard服务激活
首先确定Tensorflow的具体位置(在Dos环境下,也就是cmd) cd .. cd scripts conda env list activate tensorflow tensorboard ...
- 【codeforces 805B】3-palindrome
[题目链接]:http://codeforces.com/contest/805/problem/B [题意] 让你生成一个只包含a,b,c的字符串; 要求c出现的次数最少,且任意一个 长度为3的子串 ...
- poj 2955 区间dp入门题
第一道自己做出来的区间dp题,兴奋ing,虽然说这题并不难. 从后向前考虑: 状态转移方程:dp[i][j]=dp[i+1][j](i<=j<len); dp[i][j]=Max(dp[i ...
- 用友ERP T6技术解析(六) 库龄分析
2.4 库存管理 2.4.1 库龄分析 介绍:库存账龄是在某时间节点,某种或某类存货的库存时间的加权平均值,跟库存周转率关系明显,库存周转率越高,库存账龄越低,可是二者又不是反比关系.不能简单把库 ...
- Android广播机制分析
1.1. 广播简单介绍 Android 广播与生活中的广播概念不同,它是指系统中产生事件后的通知. Android 广播不关心接收者是否收到处理或者怎样处理广播,能够说是一种单向的通知 ...
- 【Python】python网络协议
套接字是常见的低级别的网络通讯协议,在此基础上,还有很多其他的网络通讯协议.用于实现client-server的网络互联,以下对这些协议做一个简单的介绍. 1.文件传输 FTP:文件传输协议.能够上传 ...
- poj--3630--Phone List(字典树+前缀判断)
Phone List Time Limit: 1000MS Memory Limit: 65536KB 64bit IO Format: %I64d & %I64u Submit St ...
- Oracle 11G R2 RAC中的scan ip 的用途和基本原理
Oracle 11G R2 RAC增加了scan ip功能,在11.2之前,client链接数据库的时候要用vip,假如你的cluster有4个节点,那么客户端的tnsnames.ora中就对应有四个 ...
- BZOJ 4012 树链剖分+主席树
思路: http://blog.csdn.net/lych_cys/article/details/50763073 lych的题解-- 写得很详细 //By SiriusRen #include & ...
- Spring meven 配置
使用maven的仓库化管理,可以更方便有效的控制文件. 在官网下载maven. 官网的地址:http://maven.apache.org/download.cgi 请选择最新的版本下载, 这里我用 ...