适用于内核为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. 【T电商】 maven初识

    PS:本篇博客,就是对于maven的一个简单的总结,认识.可能更多的是借鉴别人的看法,然后结合自己的使用,再加以说明. 首先,什么是maven: Apache Maven is a software ...

  2. SQL笔记 [长期更新] (-2015.4)

    [遍历所有表,复制表结构,复制表数据] --插入语句SELECT * INTO A FROM B 是在还没有A表的情况下,直接通过B表创建并把B表数据复制到A表里面,之后A,B表的结构和数据完全一样. ...

  3. CSS子元素居中(父元素宽高已知,子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  4. Visual Studio 2015完全离线安装

    虽然微软提供了Visual Studio的ISO镜像下载,但这个ISO文件并不完整,安装的过程中依然需要联网下载一些安装包,在中国特色的网络环境下导致安装过程还是非常慢的.另外,在一些网络隔离的环境中 ...

  5. iOS nib file owner

    nib文件中的file owner属性,设定后app在运行时加载nib文件的过程中会通过file owner重新建立nib文件中描述的控件与其在file owner中对应的IBOutlet或IBAct ...

  6. Mybatis按SQL查询字段的顺序返回查询结果

    在SpringMVC+Mybatis的开发过程中,可以通过指定resultType="hashmap"来获得查询结果,但其输出是没有顺序的.如果要按照SQL查询字段的顺序返回查询结 ...

  7. js数组合并

    // 第一种 var mergeTo = [4,5,6], mergeFrom = [7,8,9]; mergeTo = mergeTo.concat(mergeFrom); mergeTo; // ...

  8. css绘制特殊图形基础

    1.等腰三角形 .isosceles{ width:; height:; border:30px solid; border-left-color: transparent; border-right ...

  9. Android-Junit-Report测试报告生成——Android自动化测试学习历程

    视频地址: http://www.chuanke.com/v1983382-135467-384869.html 这个内容其实已经在用了,我在上一篇文章robotium—只有apk文件的测试中已经讲过 ...

  10. linux编译curl库的动态库so(转)

    转载请注明出处:帘卷西风的专栏(http://blog.csdn.NET/ljxfblog) curl库是一个很强大的http开源库,c++里面能够很方便的和http服务器交互. 最近项目开始内测,开 ...