多行文字超出字数部分省略(主要解决不兼容;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中 ... 
随机推荐
- ubuntu中设置wireshark抓包
			安装wireshark软件后,打开进行抓包的时候会提示权限不足.原因是普通用户没有执行权限,也打不开网络端口捕捉,因为dumpcap需要root权限. 产生这种问题的原因:比如:wireshark在进 ... 
- STO到底是什么?
			最近,链圈谈论最多的就是STO了,那STO到底是什么?现阶段发展得怎么样? 什么是STO STO英文全称Security Token Offering,即证券化通证发行,指在安全法律体系下受到约束的基 ... 
- Mac平台下的抓包神器 —— Charles
			在开发界,“抓包”这个词想必大家耳熟能详.通过抓包工具,能够获取设备在网络通讯过程中的交换数据包.在 Windows 平台上,笔者使用较多的是 Fiddler 工具,但是由于 Fiddle 使用 C# ... 
- leetcode 859. Buddy Strings
			Given two strings A and B of lowercase letters, return true if and only if we can swap two letters i ... 
- mini2440 u-boot下设置tftp
			在烧写好u-boot后,重新启动mini2440,一直按空格键进入u-boot界面: U-Boot 月 - ::) modified by tekkamanninja (tekkamanninja@. ... 
- 《CSS权威指南(第三版)》---第三章 结构和层叠
			这章主要讲的是当某个对象被选择器多次提取使用样式之后的一些冲突性解决方案: 1.特殊性:指的是当多个效果作用的时候的最终选择: 这个规则用0,0,0,0来比较.其中:内联式是1,0,0,0 ID选择 ... 
- 安装wampserver 计算机丢失msvcr100.dll
			刚刚重新安装了Windows 7 64位系统,再安装Wampserver 2时却提示系统错误,如下图所示: 在网上下载了MSVCR100.dll放到system32文件夹下依然没有用. 百度搜索了一下 ... 
- Contiki Process概述
			本文涉及到的Protothread机制知识,在http://www.cnblogs.com/songdechiu/p/5793717.html 一.进程类型 进程类型主要有协同式(cooperativ ... 
- 阿里大于短信服务_异常_01_InvalidTimeStamp.Expired
			一.异常信息 dm.aliyuncs.com InvalidTimeStamp.Expired Specified time stamp or date value is expired. 二.异常原 ... 
- Linux 查看并删除.svn目录
			1. find . -type d -name ".svn"|xargs rm -rf 
