多行文字超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)
注明:内容来处https://www.cnblogs.com/ss977/p/5846176.html
1、现webkit内核的浏览器支持display: -webkit-box;属性, 所以网页中显示两行文字,超出部分省略,可以用样式
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
2、为兼容其他浏览器,则需要js解决,以下为封装的方法。
function wordlimit(cname,wordlength){ //参数分别为:类名,要显示的字符串长度
var cname=document.getElementsByClassName(cname); //需要加省略符号的元素对象
for(var i=0;i<cname.length;i++){
var nowhtml=cname[i].innerHTML; //元素的内容
var nowlength=cname[i].innerHTML.length; //元素文本的长度
if(nowlength>wordlength){
cname[i].innerHTML=nowhtml.substr(0,wordlength)+'...'; //截取元素的文本的长度并加上省略号
}
}
}
wordlimit("sldiv",15); //调用方法
多行文字超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)的更多相关文章
- 超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)
注明:内容于http://www.cnblogs.com/chentongtong/p/5474553.html进一步整理. 1.现webkit内核的浏览器支持display: -webkit-box ...
- CSS多行文字超出隐藏加省略号
overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ...
- 微信小程序 实现多行文字 超出部分省略号显示
在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...
- css限制文字显示字数长度,超出部分自动用省略号显示,防止溢出到第二行
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...
- 单行文字溢出和多行文字溢出省略号显示的CSS样式
单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis ...
- 多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content
如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; ...
- CSS 实现单行及多行文字省略
单行文字省略 很多时候不确定字数限制,但换行可能影响整体设计,这个时候常用就是文字省略加全文字提示了 .dom{ text-overflow: ellipsis; overflow: hidden; ...
- CSS实现单行与多行文字省略(truncation)
在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...
- 多行文字垂直居中(完美兼容chrome firefox IE6 7 8 9)
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- 使用maven3 创建自定义的archetype
创建自己的archetype一般有两种方式,比较简单的就是create from project 1.首先使用eclipse创建一个新的maven project,然后把配置好的一些公用的东西放到相应 ...
- Android 修改Menu字体颜色和背景
我们知道,在Android中修改TextView的字体颜色,一般是通过setTextColor()方法.虽说Android的Menu菜单项的每一项都是由TextView组成,但是Android的sdk ...
- 关于android R.java文件无法创建的问题
R.java文件无法创建的原因网上有很多说法普遍是以下两种: 1. xml文件有错误: 解决方法就是找到哪个xml有错然后把错误修复就OK了. 2.编码问题 这时候只要把xml文件的编码改成utf8就 ...
- 算法(Algorithms)第4版 练习 1.3.25 1.3.24
代码实现: //1.3.24 /** * remove the node following the node x * (and does nothing if the argument or the ...
- Spark- ERROR Shell: Failed to locate the winutils binary in the hadoop binary path java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries.
运行 mport org.apache.log4j.{Level, Logger} import org.apache.spark.rdd.RDD import org.apache.spark.{S ...
- laravel基础课程---15、分页及验证码(lavarel分页效果如何实现)
laravel基础课程---15.分页及验证码(lavarel分页效果如何实现) 一.总结 一句话总结: 数据库的paginate方法:$data=\DB::table("user" ...
- kvm初体验之一:参考文档
KVM Virtualization in RHEL 6 Made Easy KVM Virtualization in RHEL 6 Made Easy – Part 2 RHEL 6 Virtua ...
- css:before和after中的content属性
css有一个属性叫做content.content只能使用在:after和:before之中.它用于在元素之前或者元素之后加上一些内容 就像这样: .email-address:before { co ...
- PHP 流程控制
流程控制 if, else, elseif $a = 5; $b = 9; if ($a > $b): echo "a is bigger than b"; elseif ( ...
- bzoj2673
限制这么多 肯定是网络流 考虑连边 首先我们计算出每行最多放的棋子数$sx[i]$,每列最多放的棋子数$sy[i]$ 首先由源点向第$i$行连流量为$sx[i]$费用为$0$的边,第$i$列向汇点连流 ...