多行文字超出字数部分省略(主要解决不兼容;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中 ...
随机推荐
- 【shell】shuf命令,随机排序
shuf命令主要用来对输入的每一行进行随机排序输出,我们可以利用这个属性,实现在几个文件中随机读取一个的功能 如下,zls.txt文件有三行,我们想要随机从中读取一行. 可以看到,每次读取顺序都不一样 ...
- keras:Exception: Error when checking model target
问题: 用keras的functional API搭建多输入多输出模型时,报错某个输出层对应的类标数组大小与模型中不一致. 解决办法:升级keras到最新版(doge脸)keras迭代太快了啊摔,总有 ...
- C# HttpRequest
using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...
- nginx.config配置文件模板
#user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log notice;#error_l ...
- Spring Boot2.0之自定义参数
自定义参数,把不同环境的配置放到配置文件中去. 不同环境,如何区分配置文件信息,自定义配置文件信息 比如在 application.properties定义个参数 name=toov5 Spring ...
- 搭建LoadRunner中的场景(二) 集合点
Rendezvous: 这个单词来自于法语,军队集合的意思.LoadRunner中是指各虚拟用户在同一时刻完成指定的操作. 一. 集合点设置步骤 1. 在脚本中需要测试并发性能的操作之前加入集合点. ...
- mysql修改初始密码
通过MySQL命令行,可以修改MySQL数据库的密码,下面就为您详细介绍该MySQL命令行,如果您感兴趣的话,不妨一看. 格式:mysqladmin -u用户名 -p旧密码 password 新密码 ...
- codewar代码练习1——8级晋升7级
最近发现一个不错的代码练习网站codewar(http://www.codewars.com).注册了一个账号,花了几天的茶余饭后时间做题,把等级从8级升到了7级.本文的目的主要介绍使用感受及相应题目 ...
- BrowserSync(省时的浏览器同步测试工具)
第一步:安装node 第二步:安装BrowserSync npm install -g browser-sync 第三部:启动BrowserSync 假如我在D盘建立一个文件test,里面分别包括in ...
- 7th
2017-2018-2 20179212<网络攻防技术>第7周作业 课本学习 Windows操作系统基本框架 1.windows基本结构分为运行于处理器特权模式的操作系统内核以及运行在处理 ...