注明:内容来处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. android 服务与多线程

    android服务是执行在UI主线程的.一下是代码demo: package com.example.testservice; import android.os.Bundle; import and ...

  2. AiCloud 2.0 AT开发文档【转】

    本文转载自:http://wiki.ai-thinker.com/aicloud/docs/atdevelop AT指令一览表 AiCloud AT指令   指令 描述 AT+CLDSTART 启动云 ...

  3. 在IIS中某一个网站启用net.tcp

    绑定 高级设置  http和net.tcp用逗号分隔 //擦擦擦,见鬼了,下面的是tcp.net导致我找了好久,都找不出这个错误 //一定要注意,不要写错了. 否则会收到提示:找不到具有绑定 NetT ...

  4. 51nod 1537

    题目 神犇题解 证明好巧妙,给跪OTZ 题目的式子:$ {\left( {1{\rm{ + }}\sqrt 2 } \right)^{\rm{n}}} $,设其乘开之后为 $ {\rm{a + b}} ...

  5. HDU 4652 Dice:期望dp(成环)【错位相减】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4652 题意: 给你一个有m个面的骰子. 两种询问: (1)"0 m n": “最后 ...

  6. RQNOJ 624 运动鞋:dp

    题目链接:https://www.rqnoj.cn/problem/624 题意: 小明有奖学金啦!所以他要去买运动鞋. 总共有n款鞋,分别属于t个品牌. 每款鞋的价格为c[i],在小明心目中的价值为 ...

  7. JS遍历获取多个控件(使用索引‘i’)

    1.n个tid="n1"的input.n个tid="n2"的input.n个tid="n3"的input---循环遍历 ; i <= ...

  8. UVA 111 简单DP 但是有坑

    题目传送门:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18201 其实是一道不算难的DP,但是搞了好久,才发现原来是题目没 ...

  9. 网络编程学习笔记-TCP拥塞控制机制

    为了防止网络的拥塞现象,TCP提出了一系列的拥塞控制机制.最初由V. Jacobson在1988年的论文中提出的TCP的拥塞控制由“慢启动(Slow start)”和“拥塞避免(Congestion ...

  10. linux 网络编程getdomainname与gethostname函数

    getdomainname与gethostname函数 1 gethostname() : 返回本地主机的标准主机名. 原型如下: #include <unistd.h> int geth ...