-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: ...
随机推荐
- 动力学仿真引擎ODE的学习笔记,C#演示(一)
®版权声明:本文为博主原创文章,未经博主允许不得转载. 一.ODE介绍与平台搭建. 接触到动力学仿真引擎, 是因为笔者的一款PLC仿真软件需要3D仿真.我需要达到的效果是,以3D方式构建出工控行业中常 ...
- javaweb基础 02--javaweb基础概念
1.WEB资源 * 静态web资源:指web页面中供人们浏览的数据始终是不变(如 html 页面). * 动态web资源:指web页面中供人们浏览的数据是由程序产生的,不同时间点访问web页面看到的内 ...
- 上传控件---淘宝kissy uploader+瀑布流显示
介绍Uploader : Uploader 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性. Uploader是非 ...
- 记录一下SpringMVC扫描注解包的配置
最近做了一个小项目,使用Spring4+SpringMVC+Hibernate5 但是整合完毕了之后,在页面上请求添加记录的时候发现无法开启事务,报错的信息如下: org.springframewor ...
- 关于windows 7系统下开启休眠功能的方法
今天笔者新装了一个windows 7操作系统,装完后,点击开始按钮.鼠标放到关机处的左边扩展选项时,没有发现休眠选项. 于是开始上网查询解决方法,并将过程记录如下: 首先简单的介绍一下休眠功能:休眠( ...
- mac设置文件权限问题
在使用mac时,经常我们遇到相关文件不能使用的情况,其实大多数情况都是,文件权限问题. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁止对其做任何的更改操 ...
- git如何回滚当前修改的内容?
git如何回滚当前修改的内容? 1.打开git gui,在工具栏上点击 commit ,选择 Revert Changes, 这里可以回滚单个文件: 2.一键回滚所有修改: 打开git gui,在工 ...
- CentOS下mysql安装
一.检查环境 # 切换root 权限 su root # 检查是否安装过mysql rpm -qa|grep mysql # 删除所有mysql yum -y remove mysql* 1.上传文件 ...
- ActiveMQ延迟消息配置
ActiveMQ使用延迟消息,需要在activemq.xml配置文件中添加这项: schedulerSupport="true" <broker xmlns="ht ...
- C3P0连接池配置(C3P0Utils.java)
配置文件 c3p0-config.xml <?xml version="1.0" encoding="UTF-8"?> <c3p0-confi ...