注明:内容来处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. Java for LeetCode 102 Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  2. java和js互调 webview

    public class JavaAndJSActivity extends Activity implements View.OnClickListener { private EditText e ...

  3. git用远程库的内容覆盖本地

    git fetch --all 下载远程的库的内容到本地,不做任何的合并(怎么合并可以自己选择) git reset --hard origin/master 撤销本地.暂存区.版本库(用远程服务器的 ...

  4. 51nod 1533 && CF538F

    题目:难以简述,请传送门 神犇题解Ⅰ   神犇题解Ⅱ 好劲啊跪在地上..完全没接触过K叉树的性质.. 对于每个询问,我们并不关心叶节点,只关心其他的节点.而一个完整K叉树的内节点个数是O(n/k)的, ...

  5. Ubuntu 17.4下如何安装和配置flash player

    Ubuntu Linux系统下没有自带的flash player,要自己手动安装.下面post出简单的安装过程. 首先打开终端,输入命令:sudo apt-get install flashplugi ...

  6. C语言实现队列(纯C)

    1. [代码][C/C++]代码 #include <stdio.h>#include <stdlib.h>#define ElemType int #define Statu ...

  7. java面试题04

    1.就你所熟悉的银行业务面说一下,越详细越好 银行经验:手机银行  网上银行经验  怎么支付  转账  了解基本业务 2.了解工作流的控制,审批流程以及帐务处理么? java中怎么实现工作流.审批流程 ...

  8. MySQL三个列组成唯一值查询_开源中国问题练习_20161026

    问题地址:https://www.oschina.net/question/2923955_2202674 按 service_collect_day分类以后,按 app_id,node_id,ser ...

  9. AndyQsmart ACM学习历程——ZOJ3870 Team Formation(位运算)

    Description For an upcoming programming contest, Edward, the headmaster of Marjar University, is for ...

  10. TextBox的OnTextboxChanged事件里对Text重新赋值带中文, 导致崩溃

    今天遇到一个超级bug, Textbox做了限制, 只能输入数字. 结果在搜狗输入法输入中文时导致崩溃, 出错信息如下: 未处理 System.InvalidOperationException   ...