适用于内核为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. 如何利用tomcat和cas实现单点登录(1):配置tomcat的ssl和部署cas

    如何利用tomcat和cas实现单点登录,借鉴了网上的很多教程,主要分为以下几个步骤: 一:下载好cas,tomcat之后,首先配置tomcat: 用鼠标右键点击"计算机"→选择& ...

  2. VBS获得随机数,截图函数

    '获取随机数 Public function randonum() Randomize  randonum = replace(10000*rnd(),".","a&qu ...

  3. 关于HTML(JSP)页面的缓存设置 -- cache-control

    我在项目中遇到这么一个问题,当用户登录了系统后,进入并copy下系统某个页面的link,然后关闭浏览器,重新打开浏览器,把刚才复制好的link paste到浏览器的地址栏去,直接enter,发现浏览器 ...

  4. apache-jmeter学习文档

    http://www.cnblogs.com/TankXiao/p/4045439.html#sampler

  5. 添加图片按钮-UI界面编辑器(SkinStudio)教程

    打开工具箱,选择Button控件 在窗体上添加一个Button控件 给Button控件的ImageNormal属性添加图片 添加完成后的效果 删除Text属性的值(即删除显示的文本)

  6. Python全栈开发day3

    1.Pycharm使用介绍 1.1 新建py文件自动添加python和编码 1.2 更改pycharm默认字体和风格 点击左上角“file”-->“Settings”(或者用“Ctrl+Alt+ ...

  7. window date type

    Most string operations can use the same logic for Unicode and for Windows code pages. The only diffe ...

  8. Xcode 字体 设置-- Xcode family没有显示的字体

    前往文件夹 -> /Users/user/Library/Developer/Xcode/UserData/FontAndColorThemes/  (user改为自己的用户名) -----如果 ...

  9. java基础八 [序列化和文件的输入/输出](阅读Head First Java记录)

    对象具有状态和行为两种属性.行为存在类中的方法中,想要保存状态有多种方法,这里介绍两种: 一是保存整个当前对象本身(通过序列化):一是将对象中各个状态值保存到文件中(这种方式可以给其他非JAVA程序用 ...

  10. [2015hdu多校联赛补题]hdu5297 Y sequence

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5297 题意:给你一个所有正整数的序列,然后去掉满足x^(2~r)的所有数(x为所有正整数,r>= ...