-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: ...
随机推荐
- RAC迁移至单机考虑几大因素
数据库迁移几大因素 1. 停机时间 2. 源端,目标端 操作系统平台,版本,对应的数据库版本 3. 数据量 4. 外界因素,存储空间,网络等
- MyBatis学习之多表查询
一对多需求:即一张表class中又含有多张表(teacher,student)内容.现根据class_id 来获取对应的班级信息(包括学生和老师信息) 方式一:嵌套结果 使用嵌套结果映射来处理重复的联 ...
- Facebook Cache Token Issue
https://developers.facebook.com/docs/ios/token-caching-ios-sdk/ What's session? https://developers.f ...
- iOS - 获取安装所有App的Bundle ID
先导入#import <objc/runtime.h>头文件 使用runtime获取设备上的所有app的bundle id // Class LSApplicationWorkspace_ ...
- 第一个maven项目
1.新建maven project 注意:勾上create a new simple project 2.填写相关信息, Grounp id为大项目名字,Artifact id为小项目的名字.注意:P ...
- R生存分析AFT
γ = 1/scale =1/0.902 α = exp(−(Intercept)γ)=exp(-(7.111)*γ) > library(survival) > myfit=survre ...
- R的transform
函数transform 作用:为原数据框添加新的列,改变原变量列的值,通过赋值NULL删除列变量 用法: transform(‘data’,….) data就是要修改的data, '…..'代表你要 ...
- Centos7.2安装ruby用于爬虫脚本
1,系统版本查看 2,安装依赖包 yum -y install ruby-devel yum -y install mysql-devel yum -y install gcc-c++ gcc r ...
- 自动解压vsftpd上传的文件
rsyslog.conf配置自定义模板 $template ssolog,"%msg%\n"if $programname == 'vsftpd' then ^/bin/auto_ ...
- CentOS 7 安装. Net Core SDK 2.0
1.安装.Net Core SDK 2.0 1)首先准备好先决条件 sudo yum install libunwind libicu(安装libicu依赖) 2)下载.net Core SDK二进制 ...