CSS3属性—— line-clamp控制文本行数
2024-08-24 23:16:55
说明:
限制在一个块元素显示的文本的行数。
-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:
- display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
- text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。
今天接到优化需求,帖子列表里的内容要求缩略至3行,并带‘…’省略号
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cline-clamp</title>
<style>
.box{
width: 200px;
height: 300px;
border:1px solid black;
}
p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /*设置p元素最大4行,父元素需填写宽度才明显*/
text-overflow: ellipsis;
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
/*因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作*/
word-wrap:break-word;
word-break:break-all;
} </style>
</head>
<body>
<div class="box">
<p> static:对象遵循常规流。top,right,bottom,left等属性不会被应用。 relative: 对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素。 absolute:对象脱离常规流,使用top,right,bottom,left等属性进行绝对定位,
</p>
</div>
</body>
</html>
效果如下:
如果你标签内的是英文,英文是不会自动换行的,所以你需要让他自动换行添加如下代码即可:
word-wrap:break-word;
word-break:break-all;
当然也可以使用插件clamp.js
最新文章
- LoadRunner IP欺骗(转)
- Java学习-036-JavaWeb_005 -- JSP 动作标识 - forward
- 与Perl兼容的正则表达式函数
- 对比其它软件方法评估敏捷和Scrum
- WINCE 隐藏标题栏
- Socket异步通信学习三
- bzoj 2555: SubString 后缀自动机+LCT
- 第九十六节,JavaScript概述
- JDK安装与配置详细图文教程
- .NET Core工程编译事件$(TargetDir)变量为空引发的思考
- tensorflow import 没找到cudnn库问题解决
- Django rest framework(7)----分页
- win nginx + php bat启动/停止脚本
- Python语言说明
- 安卓开发_浅谈ListView(自定义适配器)
- c++ primer 笔记 (一)
- C#并行编程(2):.NET线程池
- VS2008 安装WINCE插件报错 ToolsMsmCA(Error)解决方案___VS2008
- linux ps 命令的查看
- Excel 2010版筛选怎么用
热门文章
- DELPHI GDI + TGPFont UnitPixel 问题解决
- Monte-Carlo Dropout
- Kafka服务端之网络连接源码分析
- Winform中使用printDocument控件打印pictureBox中的二维码照片
- <;%@ include %>;导入的文件乱码
- LinkedHashSet集合
- 我用数据结构花了一夜给女朋友写了个h5走迷宫小游戏
- elasticsearch document的索引过程分析
- ASP.NET Core 3.0 使用gRPC
- 【linux】【docker】docker私服安装