适用于内核为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. 有效Email

    !/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($.trim($('#account').val()))

  2. hive和ORACLE语法对比

  3. PL/SQL连接64位Oracle配置方法

    问题原因: plsql developer无法连接64位oracle server的原因是,plsql是32位的,没有64位的版本,而oracle是64位,两者不兼容. 配置方法: 1.下载64位Or ...

  4. 银行ATM机工作流程模拟编程

    [编程内容] 编程,模拟一个ATM(Automatic Teller Machine,自动取款机)的工作流程.依据帐户信息:姓名.帐号.密码.余额,完成ATM机功能:登录.显示余额.取款.修改密码. ...

  5. ASP.NET中调用存储过程方法

    两种不同的存储过程调用方法 为了突出新方法的优点,首先介绍一下在.NET中调用存储过程的“官方”方法.另外,本文的所有示例程序均工作于SqlServer数据库上,其它情况类似,以后不再一一说明.本文所 ...

  6. 关于new/delete、malloc/free的内存泄漏检测

    情况一 new/delete 内存泄漏 1.在MFC中可以每一个cpp文件的头部添加以下一段宏来检测new申请而没用free释放的内存泄漏 #ifdef _DEBUG #define new DEBU ...

  7. Android 中的 Service 全面总结(转载)

    转载地址:http://www.cnblogs.com/newcj/archive/2011/05/30/2061370.html 感谢作者 Android 中的 Service 全面总结 1.Ser ...

  8. Brn系列商城4.1正式发布,欢迎大家下载体验

    此次升级内容如下: 独立IP搜索策略 独立文件上传策略 添加退换货功能 重构支付方式 常规性修复和改进 下载地址:http://www.brnshop.com

  9. ubuntu 14 配置 tomcat

    参考 http://www.linuxidc.com/Linux/2015-01/111119.htm

  10. ASP.NET MVC应用程序执行过程分析

    ASP.NET MVC应用程序执行过程分析 2009-08-14 17:57 朱先忠 朱先忠的博客 字号:T | T   ASP.NET MVC框架提供了支持Visual Studio的工程模板.本文 ...