-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 studio 插件安装

    安装插件步骤 一 CodeGlance 最大的用途:可用于快速定位代码.显示在右侧 二 Android Studio Prettify 可以将代码中的字符串写在string.xml文件中 选中字符串鼠 ...

  2. laravel + php cgi + nginx在windows平台下的配置

    1.d:\xampp\php\php-cgi.exe -b 127.0.0.1:9000 -c d:\xampp\php\php.ini 2.nginx conf配置如下: #user nobody; ...

  3. Elasticsearch学习之深入搜索二 --- 搜索底层原理剖析

    1. 普通match如何转换为term+should { "match": { "title": "java elasticsearch"} ...

  4. calloc(), malloc(), realloc(), free(),alloca()

    内存区域可以分为栈.堆.静态存储区和常量存储区,局部变量,函数形参,临时变量都是在栈上获得内存的,它们获取的方式都是由编译器自动执行的. 利用指针,我们可以像汇编语言一样处理内存地址,C 标准函数库提 ...

  5. jenkins 集成redmine

    安装 可以使用jenkins的插件管理页面进行安装,也可以使用其id(redmine)在镜像中进行安装并重启镜像即可. 插件安装确认 重新启动后确认此插件已经安装完毕  设定内容 系统管理 -> ...

  6. centos 7.1开机/etc/rc.local脚本不执行的问题

    Centos 7.1中,/etc/rc.local是一个软链接文件.指向的是/etc/rc.d/rc.local 在Centos之前的版本我们都会将一些开机需要执行的命令加入到/etc/rc.loca ...

  7. 【BZOJ5094】硬盘检测 概率

    [BZOJ5094]硬盘检测 Description 很久很久以前,小Q买了一个大小为n单元的硬盘,并往里随机写入了n个32位无符号整数.因为时间过去太久,硬盘上的容量字眼早已模糊不清,小Q也早已忘记 ...

  8. iOS8新特性(2)——UIPopoverController和UIPresentationController

    一.以往使用 UIPopoverController 都是只在iPad上使用 /** * UIPopoverController 只能用于iPad,上,iPhone上使用会崩溃 */ -(void)o ...

  9. vue中打包生成可配置文件以便修改接口地址

    vue打包上传到服务器之后,如果数据接口域名发生变化,需要手动修改接口地址,在发布的时候也麻烦,于是.. 在打包之后如果有一个json配置文件以便修改那不是方便很多 在网上找了一些方法貌似都是异步请求 ...

  10. poj2492 A Bug's Life【并查集】

    Background  Professor Hopper is researching the sexual behavior of a rare species of bugs. He assume ...