CSS的line-clamp属性限制文本的行数有什么要�
Admin 2022-06-18 群英技术资�
说明:限制在一个块元素显示的文本的行数�
-webkit-line-clamp 是一� 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中�
为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:
今天接到优化需求,帖子列表里的内容要求缩略�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
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
方法�1、用“@keyframes 名称{99%{opacity:1;}100%{opacity:0;}}”语句设置元素消失动画;2、用“元素{animation-duration:时间}”语句设置动画元素的动画时间,时间过后元素就会消失�
用CSS怎样做多种宫格的布局效果?对于宫格布局大家应该都不陌生,我们比较常见的有四宫格、九宫格,那么如果想要实现更多宫格的局部,要怎样做呢?这篇文章我们来了解以下用CSS怎样实做多种宫格的布局效果�
添加颜色的方法:1、利用color属性给input元素添加字体颜色,语法为“color:颜色�;”;2、利用“background-color”属性给input元素添加背景颜色,语法为“background-color:颜色�;”�
这篇文章主要给大家分享关于CSS中层叠上下文的内容,本文对层叠上下文的概念、特性及使用都有详细的介绍,感兴趣的朋友可以参考,接下来跟随小编来学习一下吧�
这篇文章我们来简单的了解一下CSS中的focus,CSS的focus什么意思呢?focus的意思也就是焦点,这是一种伪类选择器,作用是选取获得焦点的元素,下面我们来详细的看看focus如何使用,接下来就跟随小编来一起学习一下吧�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078