适用于内核为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. 关于oracle中to_char和to_date的用法

      一.24小时的形式显示出来要用HH24 select to_char(sysdate,'yyyy-MM-dd HH24:mi:ss') from dual; select to_date('200 ...

  2. mybaties中在xml中map添加一个list中的判断

    if (uIds.size() > 0) { map.put("uIds", uIds); } else { map.put("uIds", null); ...

  3. 【python】django-celery 实现django项目定时任务

    官方:https://pypi.python.org/pypi/django-celery/ 参考:http://www.weiguda.com/blog/73/ 参考:http://www.liao ...

  4. 遍历所有的选中的radio的个数和值

         var ID = "";             $('input:radio:checked').each(function (i) {                 ...

  5. 浅析Linux下的/etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc文件

    转自:http://www.ahlinux.com/shell/20239.html 0x01 /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行,并从/e ...

  6. Android IOS WebRTC 音视频开发总结(七二)-- 看到Google Duo,你想到了什么?

    本文主要介绍在线教育这个行业,文章最早发表在我们的微信公众号上,支持原创,详见这里, 欢迎关注微信公众号blackerteam,更多详见www.rtc.help 在昨天的Google I/O大会上Go ...

  7. yum命令指南

    yum check-update  检查可更新的所有软件包 yum update  下载更新系统已安装的所有软件包yum upgrade  大规模的版本升级,与yum update不同的是,连旧的淘汰 ...

  8. Python自动化 【第一篇】:Python简介和入门

    Python简介: 一.什么是python Python是一门动态解释性的强类型定义语言. pythonde 特点:“优雅”.“明确”.“简单”. 二.Python由来 python的创始人为吉多·范 ...

  9. Oracle 查询库中所有表名、字段名、字段名说明,查询表的数据条数、表名、中文表名、

    查询所有表名:select t.table_name from user_tables t;查询所有字段名:select t.column_name from user_col_comments t; ...

  10. eclipse 删除所有注释及空白行

    Ctrl+F 删除java注释:  /\*{1,2}[\s\S]*?\*/ Ctrl+F 删除xml注释:  <!-[\s\S]*?--> Ctrl+F 删除空白行:   ^\s*\n 选 ...