注明:内容来处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;的浏览器)的更多相关文章

  1. 超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)

    注明:内容于http://www.cnblogs.com/chentongtong/p/5474553.html进一步整理. 1.现webkit内核的浏览器支持display: -webkit-box ...

  2. CSS多行文字超出隐藏加省略号

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ...

  3. 微信小程序 实现多行文字 超出部分省略号显示

    在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...

  4. css限制文字显示字数长度,超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

  5. 单行文字溢出和多行文字溢出省略号显示的CSS样式

    单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis ...

  6. 多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content

    如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; ...

  7. CSS 实现单行及多行文字省略

    单行文字省略 很多时候不确定字数限制,但换行可能影响整体设计,这个时候常用就是文字省略加全文字提示了 .dom{ text-overflow: ellipsis; overflow: hidden; ...

  8. CSS实现单行与多行文字省略(truncation)

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  9. 多行文字垂直居中(完美兼容chrome firefox IE6 7 8 9)

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. PHP Framework

    PHP Framework is built for PHP developers who need elegant toolkit to create full-featured web appli ...

  2. web 全栈 学习 1 工程师成长思路图

    第一部分: 技术的三个阶段 实现 ---> 借鉴 ---> 优化 实现:为了实现功能,不考虑可读性.借鉴:阅读开源代码,开源程序,学到编程思想.优化:可读性,可执行. 阶段一:实现多做事, ...

  3. ajax 异步 跨域上传图片

    客户端 <label for="text">名称</label> <input type="text" id="text ...

  4. Linux-3.14.12内存管理笔记【kmalloc与kfree实现】【转】

    本文转载自:http://blog.chinaunix.net/uid-26859697-id-5573776.html kmalloc()是基于slab/slob/slub分配分配算法上实现的,不少 ...

  5. VLAN虚拟局域网技术(二)-计算机网络

    本文主要知识来源于学校课程,部分知识来自于H3C及思科中国公司网页技术手册,未经许可,禁止转载.如需转载,请联系作者并注明出处. 本节主要是总结一些思科的VLAN组中的私有协议:DTP和VTP. 1. ...

  6. Linux学习之路(一)命令基本格式

    据统计Linxu里面能够识别的命令超过3000个,而我们常用的Linux基本命令在60个左右.常用命令是我们必须掌握的命令,需要我们多练习才能记住,最起码要敲3遍以上. 简单的把常用命令分为以下几大类 ...

  7. (1)Java多线程编程核心——Java多线程技能

    1.为什么要使用多线程?多线程的优点? 提高CPU的利用率 2.什么是多线程? 3.Java实现多线程编程的两种方式? a.继承Thread类 public class MyThread01 exte ...

  8. Apache-POI 简单应用

    测试的Excel文件为四列的普通表格 jar包:poi-3.15-beta2.jar(Office2003xls文件).poi-ooxml-3.15-beta2.jar(Office2007xlsx文 ...

  9. 0x01

    随便记录点想法什么的, 这个博客的编辑界面挺简陋的...

  10. AtCoder Beginner Contest 103

    https://beta.atcoder.jp/contests/abc103 A - Task Scheduling Problem Time Limit: 2 sec / Memory Limit ...