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 ...
随机推荐
- zmap使用笔记
zmap使用笔记 zmap, 一个网络端口开放性的快速扫描工具.至于这个工具的特色,配置参数,和比的工具的对比,不做介绍.只记录一下近期使用过程中,遇到的问题.软件版本:2.1.1 传言与现实 传言: ...
- 使用GDB进行调试
下面是几篇非常好的GDB使用指南: http://www.cs.cmu.edu/~gilpin/tutorial/ http://oss.org.cn/ossdocs/gnu/linux/gdb.ht ...
- MSsql 服务器之间远程及其链接查询
先指定端口1433(SQL,协议里面设置) 然后启用 菜单-程序-外围服务应用配置-服务和连接时外围应用配置 试试远程连接 成功连接OK 下面示例链接服务器.上面远程是必须走的一步动作. --创建链接 ...
- C++学习基础七——深复制与浅复制
一.深复制与浅复制基本知识 深复制和浅复制,又称为深拷贝和浅拷贝. 深复制和浅复制的区别如下图1所示: 图1 图1表示的是,定义一个类CDemo,包含int a和char *str两个成员变量, 当深 ...
- projecteuler Problem 9 Special Pythagorean triplet
A Pythagorean triplet is a set of three natural numbers, a < b < c, for which, a2 + b2 = c2 Fo ...
- js加载顺序
在jsp页面中引js文件,页面按照js顺序加载,若js中存在相同的方法,应该会执行顺序在前的js中的方法.有时候遇到js方法不执行或者执行不对的情况,可能就是js的顺序问题,有时候会找很久找不到问题. ...
- Java web--反射(解刨)
本质:先加载类 再解刨类的方法,字段,构造函数 目的:解刨出构造函数 为了new对象 解刨出字段 为了封装数据进去 解刨方法 ...
- sed命令手册
sed 是一种在线编辑器,它一次处理一行内容. 处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space). 接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的内 ...
- 程序的删除kill、killall
发送信号给程序,或者列出信号集 SYNOPSIS kill [-s SIGNAL | -SIGNAL] PID... kill -l [SIGNAL]... 1.信号操 ...
- 动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点:
移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...