适用于内核为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多行文本省略号的更多相关文章

  1. css多行文本省略号问题

    已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overfl ...

  2. css多行文本省略号(...)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现单行文本省略 <!DOCTYPE html ...

  3. CSS 设置多行文本省略号 ...

    CSS 设置多行文本省略号 ... .box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: ...

  4. 多行文本省略号的实现.html

    多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. [CSS备忘]多行文本省略号

    overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box ...

  6. 多行文本省略号样式失效丢失,以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

    问题现象   使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出 ...

  7. 微信小程序之多行文本省略号

    最近在捣鼓小程序,期间遇到的问题,踩过的坑,也是在网上各种搜.这里也说下我解决的问题,方便大家. 在小程序首页显示文本列表的时候,为了美观,不希望把所有的文本都显示出来,希望是显示前几行(比如前3行, ...

  8. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  9. css 多行文本的溢出显示省略号(移动端)

    多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...

随机推荐

  1. appium+python:自己写的一个滑动控件的方式

    #调用方式roll_ele("ID","ele_id","7","up",3)#将控件分为7格,从底部倒数第二格向上滑动 ...

  2. 在本地主机上powershell中连接远程主机执行vbs脚本,得到执行结果(2008版及以上)

    在桌面版的主机上远程管理服务器版主机,在本地powershell中连接远程主机执行vbs脚本,得到执行结果. 执行步骤: 1.将本地主机上的Hyper.vbs复制到远程连接主机上.例如,本地vbs脚本 ...

  3. CGContextRef 绘图

    如何绘制一个矩形 添加一个属性 @property(nonatomic,strong) NSString* RectNumber; 1. 首先重写UIview的drawRect方法 - (void)d ...

  4. MSBuild简单介绍

    背景 托博客园的福,上周六,有家开发医疗行业系统的初创公司联系我,说在博客园上看到我关于WPF的几篇文章,邀请我去他们那里交流WPF相关的技术知识和心得体会.作为非大拿的我自然是受宠若惊,但对方好意相 ...

  5. SSH整合(1)异常

    信息: No Spring WebApplicationInitializer types detected on classpath 十二月 01, 2016 10:06:12 下午 org.apa ...

  6. submit异步提交 回调的方法

    背景: mvc模式下,当submit表单的时候,后台Control自动绑定Model类,但是如果不用submit来提交,改用ajax提交的时候,后台Control无法获取前台form表单内相应Name ...

  7. JS 驗證英文字母

    //英文简介栏位焦点离开事件    function checkSummaryEN(SummaryEN) {        var val = $(SummaryEN).val();        v ...

  8. Python 前端之JS

    JavaScript由浏览器编译运行 JS的导入方式有两种,一种直接定义,第二种通过src引入:可以存放在<head>头部,但是强烈建议放在<body>的最下面,因为如果你引入 ...

  9. ngx.lua中遇到的小问题

    作者: 胡 志伟 分类: ngx_lua, 开发代码 发布时间: 2013-09-26 08:40 ė 6评论关闭 在使用ngx.redirect 到一个新的地址时,错误日志提示: lua entry ...

  10. 4.Mybatis的输入映射(parameterType类型解析)

    前面提到过Mybatis可以对输入的参数进行映射,那么现在我们来看一下输入映射,关于输入映射大概可以分为几种情况来学习: 1.基本的类型 2.实体类 3.包装类 1.参数是基本的类型(int,Stri ...