-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. SharpGL学习笔记(十) 常见的光源类型,创建光源

    在OpenGL中,使用光源的特性组合,如颜色,位置,方向等等,可以创建多种不同类型的灯光. 常见的几种灯光类型有: 定向光源(directonal) 定位光源(positional) 衰减光源 聚光灯 ...

  2. EGL 1.0 学习笔记

    http://hi.baidu.com/leo_xxx/item/b01b1fc29abff355ac00ef5c 基本概念 EGL是OpenGL ES与本地Window系统之间的桥梁.EGL创建渲染 ...

  3. Sencha Touch 实战开发培训 视频教程 第二期 第六节

    2014.4.18 晚上8:20左右开课. 本节课耗时没有超出一个小时. 本期培训一共八节,前两节免费,后面的课程需要付费才可以观看. 本节内容: 图片展示 利用list展示图片: 扩展Carouse ...

  4. [原]secureCRT 改变显示宽度

    1.首先全局设置:Options - Global Options - Terminal - Appearance - Maximumcolumns 最大只能设置成1024(推荐256),设置越大越占 ...

  5. linux route命令详解

    考试题一:linux下如何添加路由(百度面试题) 以上是原题,老男孩老师翻译成如下3道题. a.如何用命令行方式给linux机器添加一个默认网关,假设网关地址为10.0.0.254? b. 192.1 ...

  6. Nexus网页直接上传jar包

    登陆已经安装好的nexus私有仓库,如图:   点击左边菜单“Repositories”,选择右边列表“3rd party“   点击“3rd party”,选择artifact Upload,如下图 ...

  7. 【CF873F】Forbidden Indices 后缀自动机

    [CF873F]Forbidden Indices 题意:给你一个串s,其中一些位置是危险的.定义一个子串的出现次数为:它的所有出现位置中,不是危险位置的个数.求s的所有子串中,长度*出现次数的最大值 ...

  8. 【CF878D】Magic Breeding bitset

    [CF878D]Magic Breeding 题意:有k个物品,每个物品有n项属性值,第i个人的第j个属性值为aij,有q个操作: 1 x y 用x和y合成一个新的物品,新物品的编号是++k,新物品的 ...

  9. Spring加载xsd文件报错:because 1) could not find the document; 2) the document could not be read...

    Spring启动时加载xml文件的过程: spring在加载xsd文件时总是先试图在本地查找xsd文件(spring的jar包中已经包含了所有版本的xsd文件),如果没有找到,才会转向去URL指定的路 ...

  10. css的border的solid

    http://www.w3school.com.cn/cssref/pr_border-style.asphttp://www.w3school.com.cn/tiy/t.asp?f=csse_bor ...