您现在的位置是：网站首页> 编程资料编程资料

css 实现文字过长自动隐藏功能CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2021-09-04 1058人已围观

简介这篇文章主要介绍了css 实现文字过长自动隐藏功能,需要的朋友可以参考下

单行

 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

多行(兼容各个浏览器)//通过覆盖最后几个字的形式

 p{ position:relative; line-height:1.4em; height:4.2em;/* 3 倍line-height 多少倍就是多少行*/ overflow:hidden; } .p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }

效果如下

总结

以上所述是小编给大家介绍的css 实现超出规定行数自动隐藏功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

上一篇：一份纯CSS loading动画效果代码示例css3如何绘制一个圆圆的loading转圈动画css3 animation制作loading白色圆点滑过加载动画特效源码纯CSS3实现的红酒碰杯loading动画效果源码css3 svg实现的三角形图标变换loading加载动画特效源码15种HTML5和CSS3炫酷彩色loading加载动画特效详解纯CSS3制作的20种loading动效11种CSS3波形loading加载动画特效CSS实现一个简单loading动画效果

下一篇：详解CSS3 rem(设置字体大小) 教程轻松掌握CSS3中的字体大小单位rem的使用方法

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢