-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. Word 2010 制作文档结构之页码从正文开始设置

    一般技术性文档结构划分: 第一页(首页) 第二页(修改记录页/版本记录页) 第三页(目录) 第四页(正文) 需求: 页脚编码 从正文(即第四页)开始,而不是从首页开始,那么该如何实现? 前提准备: 输 ...

  2. 属性特性get/set

    get/set访问器是属性的特性: 特性只有内部才用,因此在javaScript中不能直接访问他们: (1)数据属性——包含一个数据值的位置.这个位置可以读入和写入值. 数据属性有描述其行为的四个特性 ...

  3. Kerberos认证与攻击学习总结

    0.背景 聆听了n1nty大佬(90后黑客代表)的谆谆指导,学习了n1nty大佬的基本操作,决定总结一下,做一个简要的读书笔记,也把之前自己记录的关于Windows的安全的一些博客能够串联起来.所以首 ...

  4. IOS 6 和 IOS7 UITableViewCell上添加控件的获取

    假设每个cell上面都有UIButton,怎么判断哪个Cell上的按钮被按下了呢? IOS6上 -(IBAction)btnClick:(id)sender { UIButton *btn = (UI ...

  5. Java秒杀简单设计三:数据封装类

    上一篇https://www.cnblogs.com/taiguyiba/p/9828984.html 整合了数据库表和Dao层代码 这一篇继续设计数据封装类: 涉及到获取秒杀地址,查询,返回秒杀结果 ...

  6. sklearn的快速使用

    传统的机器学习任务从开始到建模的一般流程是:获取数据 -> 数据预处理 -> 训练建模 -> 模型评估 -> 预测,分类.本文我们将依据传统机器学习的流程,看看在每一步流程中都 ...

  7. DLRS(近三年深度学习应用于推荐系统论文汇总)

    Recommender Systems with Deep Learning Improving Scalability of Personalized Recommendation Systems ...

  8. 2018C语言第二次作业

    一.学习内容总结 1.指针是一种数据类型,同样占有空间,其存储的是内存地址: 2.定义指针变量要在变量名之前加“*”字符表示: 3.“&”是取地址运算符,“*”是间接运算符: (注:声名和使用 ...

  9. jquery给动态添加的dom元素绑定事件

    $('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...

  10. opencv学习网站

    强烈推荐一个老外的网站,pyimagesearch 网址:https://www.pyimagesearch.com/