css多行文本省略号
适用于内核为webkit的浏览器:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden; 兼容大多数浏览器,但是最后一行无论文本是否溢出都会出现省略号,需配合js实现
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
css多行文本省略号的更多相关文章
- css多行文本省略号问题
已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overfl ...
- css多行文本省略号(...)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现单行文本省略 <!DOCTYPE html ...
- CSS 设置多行文本省略号 ...
CSS 设置多行文本省略号 ... .box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: ...
- 多行文本省略号的实现.html
多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- [CSS备忘]多行文本省略号
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box ...
- 多行文本省略号样式失效丢失,以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'
问题现象 使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出 ...
- 微信小程序之多行文本省略号
最近在捣鼓小程序,期间遇到的问题,踩过的坑,也是在网上各种搜.这里也说下我解决的问题,方便大家. 在小程序首页显示文本列表的时候,为了美观,不希望把所有的文本都显示出来,希望是显示前几行(比如前3行, ...
- css多行文本垂直居中问题研究
css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...
- css 多行文本的溢出显示省略号(移动端)
多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...
随机推荐
- 链接测试工具xenu link sleuth的使用
链接测试工具xenu link sleuth的使用很简单. 可以从这里下载 http://home.snafu.de/tilman/xenulink.html 但是注意到: 如果需要登录才能进入所有的 ...
- 后一个div无法遮挡住前一个有img的div
这个标题实在是我无奈之下才取出来的,毕竟我文采有限~ 今天我遇到的一个eggpain的问题: 前提:当页面上有两个没有background的div,大小一样,绝对定位在同一个地方(让第二个遮挡住第一个 ...
- 解决EditorLineEnds.ttr被锁定导致Delphi2006-2010无法启动的问题
在批处理最后增加了启动Delphi的命令.将批处理和Delphi放在同一目录即可. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- AbstractQueueSynchronizer
1.AbstractQueuedSynchronizer(以下简称AQS)是Java并发包提供的一个同步基础机制,是并发包中实现Lock和其他同步机制(如:Semaphore.CountDownLat ...
- css之让文字在一定范围内显示,不超过固定的宽度和高度
- node,不懂不懂
Four Day-------------------------node.js分对象全局/核心模块/文件模块path(核心模块)--作用:操作路径basername/获取传入路劲dimame/获取传 ...
- Linux搭建smtp服务器+laravel5.2发邮件配置
/** * 这里主要是想通过自己搭建smtp服务器,配置laravel5.2框架,实现邮箱发邮件功能, * 主要内容是搭建smtp服务器,laravel5.2发邮件顺手提一下 */ /** * 1.l ...
- 1-9 TCP/IP参考模型
ISO/OSI参考模型与TCP/IP模型对比 一.网络访问层 功能:包括IP地址与物理硬件地址的映射以及将IP地址封装成帧. 基于不同类型的网络接口,网路访问层定义了和物理介质的连接 网路访问层包含了 ...
- 关于64位windows2003 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0” 的问题
我了个去啊! 在自己机器上测试通过的excel导入功能在客户服务器上死活都不好用,查了半天后来发现客户服务器是64位的win2003!! try catch捕捉问题为:未在本地计算机上注册“Micro ...
- 删除多余的provisioning profile
当你的工程中有个人证书和企业证书时,你xCode打包的时候可能会发现一个问题:当你的Code Signing设置iOS Developer和Automatic,并且你的Bundle ID和Team选择 ...