css强制换行显示省略号之显示两行后显示省略号
1,首先来一个固定宽度,在一行显示,超出隐藏,显示省略号的样式
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
2,其实来一个可以设置让它显示多少行后再显示省略号,这只能用私有属性解决了
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;/*重点,不能用block等其他*/
-webkit-line-clamp: 2;/*重点IE和火狐不支持*/
-webkit-box-orient: vertical;/*重点*/
因为 -webkit-line-clamp: 2 是webkit的私有属性,其他浏览器不可以用。所以在网上找了一下,有个插件还是很好用的,完美的实现了这个属性。
还可以配置很多属性,比如 是否动画展开,不一定要显示省略号,可以显示其他符号,是否启用 -webkit-line-clamp: 这个属性等等;
下载地址 https://github.com/josephschmitt/Clamp.js
首先引入
<script src="../clamp.js"></script>
//调用方法:$clamp(dom,options); dom是节点,options是配置项
用这个插件需要注意一下事项:
我在用这个插件的时候,IE和火狐下面形态各异,火狐在第二行还没到第二行的末尾处(甚至还有很宽的距离)就显示省略号了。IE有时候也出现。
查看了一下源码发现 这个和指定不指定line-height有关系,因为源码中会获取line-height获取高度 来判断显示省略号的;
function getLineHeight(elem) {//计算高度
var lh = computeStyle(elem, 'line-height');
if (lh == 'normal') {//如果DOM 节点没有指定line-height 那么IE会输出默认的normal 火狐会输出22px lh = parseInt(computeStyle(elem, 'font-size')) * 1.2;
}
return parseInt(lh);
}
如果没有指定行高,IE下面computeStyle(elem, 'line-height');就会返回 nomal。火狐下面就会根据浏览器返回[22px]
再接着看源码
if (supportsNativeClamp && opt.useNativeClamp) {//如果支持webkit-line-clamp 直接用
sty.overflow = 'hidden';
sty.textOverflow = 'ellipsis';
sty.webkitBoxOrient = 'vertical';
sty.display = '-webkit-box';
//sty.wordWrap = 'break-word';
sty.webkitLineClamp = clampValue; if (isCSSValue) {
sty.height = opt.clamp + 'px';
}
}
else {
var height = getMaxHeight(clampValue);
if (height <= element.clientHeight) {
clampedText = truncate(getLastChild(element), height);
}
}
如果用户在样式中指定了line-height,IE和火狐下面 就会 height == element.clientHeight(一直等于),则就一直会走
clampedText = truncate(getLastChild(element), height); 这段代码。所以需要把 height <= element.clientHeight 的= 号去掉。(具体没去研究,看源码truncate函数即可,下次补上)
没有指定的话 IE就会根据 font-size*12 = 16*1.2 = 19.2
火狐则是一直是22px ,这就有很大差异了。导致
<script>
var header = document.getElementsByTagName('h1')[0],
$clamp(header, {clamp: 2}); //还可以配置如下 选项 。options包括:clamp——行数,useNativeClamp——是否使用-webkit-line-clamp属性,trucationChar——省略的符号(不限于省略号),truncationHTML——省略的内容(不限于符号),animate——是否实现动画折叠。
</script>
还有一个插件 也不叫好用,不过这个插件好像只能设置固定的宽高,超出宽高才会隐藏,不过也多了一些配置(比如,+号折叠,展开。控制多少个字符显示灯)
jQuery.dotdotdot
css强制换行显示省略号之显示两行后显示省略号的更多相关文章
- AngularJS 表单提交后显示验证信息与失焦后显示验证信息
虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...
- css文本超出部分省略号&CSS强制换行总结
word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...
- CSS 强制换行和禁止换行学习
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- css强制换行和超出隐藏实现
一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...
- CSS强制换行和禁止换行代码
一.强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- css强制换行和超出部分隐藏实现
一.强制换行 1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 whi ...
- CSS 强制换行和禁止换行强制换行 和禁止换行样式
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作用,以单词作为换行依据. ...
- CSS - 强制换行和禁止换行强制换行 和禁止换行样
强制换行 word-break: break-all; 只对英文起作用,以字母作为换行依据. word-wrap: break-word; 只对英文起作用,以单词作为换行依据. whi ...
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
随机推荐
- centos6里面装zabbix(二)
第一步: 如果这一步的时候有错误,那么修改php.ini(/usr/local/php/etc/这个目录下),然后重启php这个配置文件. 第二步: 第三步: 第四步: 第五步: 第六步:做到这一步的 ...
- Selenium 2自动化测试实战40(单线程)
单线程 #onethread.py #coding:utf-8 from time import sleep,ctime #听音乐任务 def music(): print('i was listen ...
- Linux开机启动过程分析
开机过程指的是从打开计算机电源直到LINUX显示用户登录画面的全过程.分析LINUX开机过程也是深入了解LINUX核心工作原理的一个很好的途径. 启动第一步--加载BIOS 当 你打开计算机电源,计算 ...
- CentOS7或CentOS8 开机自动启用网卡的设置方法
sudo nano /etc/sysconfig/network-scripts/ifcfg-enp0s3(p0s3是网卡,名字不同环境会有差异,输入时可按tab自动补全.) 将最后一行的 ONBOO ...
- 树莓派(Linux)添加USB外接硬盘
1.显示系统的硬盘设备以及分区 sudo fdisk -l 显示设备名,例如/dev/sda1 2.树莓派默认不支持NTFS文件系统,如果需要支持则要安装相应的软件包 sudo apt-get ins ...
- 一些php常用函数积累
本文链接 <?php // id: ecffe70d3af54df9bad97b61918ace7d global $ct_path, $ct_log_path; $log_path = &qu ...
- android#定制ListView的界面
内容摘自<第一行代码>——郭霖 只能显示一段文本的ListView实在是太单调了,我们现在就来对ListView的界面进行定制,让它可以显示更加丰富的内容.首先需要准备好一组图片,分别对应 ...
- iscsi-分区类型
iSCSI简介(Internet SCSI): iSCSI 小型计算机系统接口,IBM公司研发,用于在IP网络上运行SCSI协议:解决了 SCSI需要直连存储设备的局限性:可以不停机扩展存储容量,iS ...
- 逆序对 -- cogs1438 火柴排队
题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=vimiQkqjU [题目描述] 样例一输入: 4 2 3 1 4 3 2 1 4 样例二 ...
- C++学习笔记-继承中的构造与析构
C++存在构造函数与析构函数,继承中也存在构造和析构函数.继承中的构造和析构函数与普通的构造析构有细微差别. 赋值兼容性原则 #include "iostream" using n ...