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实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
PHP系统流量分析的程序
2006/10/09 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
JS实现留言板功能
2017/06/17 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
js实现自动播放匀速轮播图
2020/02/06 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
税务专业毕业生自荐信
2013/11/10 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
法制演讲稿
2014/09/10 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
跑出一片天观后感
2015/06/08 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL