-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: ...
随机推荐
- 关于 ArrayList.toArray() 和 Arrays.asList().toArray()方法
1.ArrayList.toArray() 理解 * 通过源码我们可以看到返回的是Object类型的数组,失去了原有的实际类型,虽然底层存储是具体类型的对象,这也正体现了文档中说的:该方法起到了 ...
- Linux 下Redis集群安装部署及使用详解(在线和离线两种安装+相关错误解决方案)
一.应用场景介绍 本文主要是介绍Redis集群在Linux环境下的安装讲解,其中主要包括在联网的Linux环境和脱机的Linux环境下是如何安装的.因为大多数时候,公司的生产环境是在内网环境下,无外网 ...
- bs-loading
根据bootstrap的modal来显示loading动效. 核心内容: 1.图片转base64方法: // 图片压缩-start function run(input_file,get_data){ ...
- pycharm 里面引用pymysql
import pymysql db =pymysql.connect(host ='192.168.1.131',port=3306,user='jack',password ='jack',db = ...
- JS的压缩、混淆、加密
参考: 博客园:js压缩.混淆和加密 知乎:前端如何给 JavaScript 加密(不是混淆)? (阿里聚安全有回答问题) 站长工具 (在线JS压缩加密工具) Obfuscator (在家JS压缩 ...
- centos 7.1开机/etc/rc.local脚本不执行的问题
Centos 7.1中,/etc/rc.local是一个软链接文件.指向的是/etc/rc.d/rc.local 在Centos之前的版本我们都会将一些开机需要执行的命令加入到/etc/rc.loca ...
- 【CF840E】In a Trap 分块
[CF840E]In a Trap 题意:一棵n个点的树,第i个点权值为ai,q次询问,每次给定u,v(u是v的祖先),求对于所有在u-v上的点i,$a_i\ \mathrm{xor}\ dis(i, ...
- java常用数据格式转化,类似数据库group by cube rollup
java常用数据格式转化,类似数据库group by cube rollup单循环一条sql返回格式如:List<Map<String, List<Record>>> ...
- python的类中为什么要引入self
从第一次接触python的面向对象编程时起就很看不惯它的self,简直反人类. 相关资源: What is the purpose of self in Python? http://stackove ...
- iOS - 视频开发
视频实质: 纯粹的视频(不包括音频)实质上就是一组帧图片,经过视频编码成为视频(video)文件再把音频(audio)文件有些还有字幕文件组装在一起成为我们看到的视频(movie)文件.1秒内出现的图 ...