CSS3属性 line-clamp控制文本行数的使用


Posted in HTML / CSS onMarch 19, 2020

说明:限制在一个块元素显示的文本的行数。

-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>

效果如下:

CSS3属性 line-clamp控制文本行数的使用

如果你标签内的是英文,英文是不会自动换行的,所以你需要让他自动换行添加如下代码即可:

word-wrap:break-word;
word-break:break-all;

当然也可以使用插件clamp.js

 到此这篇关于CSS3属性 line-clamp控制文本行数的使用的文章就介绍到这了,更多相关CSS3 line-clamp控制行数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
手把手教你用纯css3实现轮播图效果实例
May 04 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 #HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 #HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 #HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 #HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 #HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 #HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 #HTML / CSS
You might like
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python 2.7.14安装图文教程
2018/04/08 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Python操作qml对象过程详解
2019/09/26 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python中for in的用法详解
2020/04/17 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
英文自我鉴定
2013/12/10 职场文书
消防安全检查制度
2014/02/04 职场文书
新郎答谢词
2015/01/04 职场文书
语文复习计划
2015/01/19 职场文书
党员活动总结
2015/02/04 职场文书
送给客户微信问候语!
2019/07/04 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python