-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:

  • display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

如果你标签内的是英文,英文是不会自动换行的,所以你需要让他自动换行添加如下代码即可

word-wrap:break-word;
word-break:break-all;

也可以使用插件

clamp.js

-webkit-line-clamp超过两行就出现省略号的更多相关文章

  1. 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用

    为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...

  2. css实现一行居中显示,两行靠左显示,超过两行以引号省略

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. background: inherit制作倒影、单行居中两行居左超过两行省略

    1.background: inherit;制作倒影 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box- ...

  4. javascript超过容器后显示省略号效果(兼容一行或者多行)

    javascript超过容器后显示省略号效果       在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...

  5. CSS文本超过两行用省略号代替

    1.只显示一行,超出部分用省略号 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 2.只显示两行(或多行),超出部分用省 ...

  6. 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  7. 谈谈一些有趣的CSS题目-- 单行居中,两行居左,超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  8. css强制换行显示省略号之显示两行后显示省略号

    1,首先来一个固定宽度,在一行显示,超出隐藏,显示省略号的样式 display:block; white-space:nowrap; overflow:hidden; text-overflow:el ...

  9. CSS实现内容超过长度后以省略号显示

    样式: {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 说明: white-space: ...

随机推荐

  1. android cannot locate symbol 'sigemptyset'问题解决

    设备是android 4.1的平板电脑,支持armeabi-v7a和mips,为了能用上poco c++ lib,用cmake编译了poco mips架构的lib,但在android studio里引 ...

  2. Artech的MVC4框架学习——第七章Action的执行

    概况:Action的执行不仅包含action方法的执行,还包含相关筛选器的执行. 第一基于线程池的请求,http请求称谓工作线程(p321),基于线程池优势:工作线程重用和工作线程数量的限制. 第二两 ...

  3. pip安装python包出现Cannot fetch index base URL http://pypi.python.org/simple/

    pipinstall***安装python包,出现 Cannot fetch index base URL  http://pypi.python.org/simple /错误提示或者直接安装不成功. ...

  4. 3种方法教你PS快速去掉水印

    方法一:使用选框工具 勾选水印部分: 按住Shift+f5选择内容识别: 然后 ctrl+d 取消选择,水印就去掉了 PS:其实这个方法有个快捷办法,直接使用选框工具选中之后,按Delete就可以弹出 ...

  5. numpy.argsort详解

    numpy.argsort(a, axis=-1, kind='quicksort', order=None)[source] Returns the indices that would sort ...

  6. php代码不支持多维数组,注释和没有缓存功能。

    php代码:simplet.class.php<?phpclass SimpleT {private $t_vars;private $templates_dir;private $templa ...

  7. ELK之收集tomcat访问日志

    把tomcat访问日志转换成json格式然后收集 修改配置文件conf/server.xml把日志输出改成json格式 添加logstash配置文件(日志按天切割可以使用*进行匹配所有)

  8. poj1850Code

    Code Transmitting and memorizing information is a task that requires different coding systems for th ...

  9. 计蒜客 30994 - AC Challenge - [状压DP][2018ICPC南京网络预赛E题]

    题目链接:https://nanti.jisuanke.com/t/30994 样例输入: 5 5 6 0 4 5 1 1 3 4 1 2 2 3 1 3 1 2 1 4 样例输出: 55 样例输入: ...

  10. 线段树(Segment Tree)总结

    0 写在前面 怎么说呢,其实从入坑线段树一来,经历过两个阶段,第一个阶段是初学阶段,那个时候看网上的一些教学博文和模板入门了线段树, 然后挑选了一个线段树模板作为自己的模板,经过了一点自己的修改,然后 ...