-webkit-line-clamp超过两行就出现省略号
-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超过两行就出现省略号的更多相关文章
- 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用
为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...
- css实现一行居中显示,两行靠左显示,超过两行以引号省略
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- background: inherit制作倒影、单行居中两行居左超过两行省略
1.background: inherit;制作倒影 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box- ...
- javascript超过容器后显示省略号效果(兼容一行或者多行)
javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...
- CSS文本超过两行用省略号代替
1.只显示一行,超出部分用省略号 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 2.只显示两行(或多行),超出部分用省 ...
- 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 谈谈一些有趣的CSS题目-- 单行居中,两行居左,超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- css强制换行显示省略号之显示两行后显示省略号
1,首先来一个固定宽度,在一行显示,超出隐藏,显示省略号的样式 display:block; white-space:nowrap; overflow:hidden; text-overflow:el ...
- CSS实现内容超过长度后以省略号显示
样式: {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 说明: white-space: ...
随机推荐
- Android studio 插件安装
安装插件步骤 一 CodeGlance 最大的用途:可用于快速定位代码.显示在右侧 二 Android Studio Prettify 可以将代码中的字符串写在string.xml文件中 选中字符串鼠 ...
- 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; ...
- Elasticsearch学习之深入搜索二 --- 搜索底层原理剖析
1. 普通match如何转换为term+should { "match": { "title": "java elasticsearch"} ...
- calloc(), malloc(), realloc(), free(),alloca()
内存区域可以分为栈.堆.静态存储区和常量存储区,局部变量,函数形参,临时变量都是在栈上获得内存的,它们获取的方式都是由编译器自动执行的. 利用指针,我们可以像汇编语言一样处理内存地址,C 标准函数库提 ...
- jenkins 集成redmine
安装 可以使用jenkins的插件管理页面进行安装,也可以使用其id(redmine)在镜像中进行安装并重启镜像即可. 插件安装确认 重新启动后确认此插件已经安装完毕 设定内容 系统管理 -> ...
- centos 7.1开机/etc/rc.local脚本不执行的问题
Centos 7.1中,/etc/rc.local是一个软链接文件.指向的是/etc/rc.d/rc.local 在Centos之前的版本我们都会将一些开机需要执行的命令加入到/etc/rc.loca ...
- 【BZOJ5094】硬盘检测 概率
[BZOJ5094]硬盘检测 Description 很久很久以前,小Q买了一个大小为n单元的硬盘,并往里随机写入了n个32位无符号整数.因为时间过去太久,硬盘上的容量字眼早已模糊不清,小Q也早已忘记 ...
- iOS8新特性(2)——UIPopoverController和UIPresentationController
一.以往使用 UIPopoverController 都是只在iPad上使用 /** * UIPopoverController 只能用于iPad,上,iPhone上使用会崩溃 */ -(void)o ...
- vue中打包生成可配置文件以便修改接口地址
vue打包上传到服务器之后,如果数据接口域名发生变化,需要手动修改接口地址,在发布的时候也麻烦,于是.. 在打包之后如果有一个json配置文件以便修改那不是方便很多 在网上找了一些方法貌似都是异步请求 ...
- poj2492 A Bug's Life【并查集】
Background Professor Hopper is researching the sexual behavior of a rare species of bugs. He assume ...