您正在使用 IPV4 [3.234.244.181] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 劳动节 006
2024年 端午节 046
2025年 元 旦 251
2025年 春 节 279
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
CSS文本超出2行就隐藏并且显示省略号
内容摘要: 超出一行隐藏:overflow:hidden;//超出的文本隐藏text-overflow:ellipsis;//溢出用省略号显示white-space:nowrap;//溢出不换行但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢?超出两行隐藏:css3解决了这个问题,解决方法如下:display:-webkit-box;//将对象作为弹性伸缩......
超出一行隐藏:

overflow:hidden;//超出的文本隐藏

text-overflow:ellipsis;//溢出用省略号显示

white-space:nowrap;//溢出不换行

但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢?

超出两行隐藏:

css3解决了这个问题,解决方法如下:

display:-webkit-box;//将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical;//从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)

-webkit-line-clamp:2;//这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。

所以,最后的结果:

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:CSS实现一个渐变色箭头的示例代码

 

下一篇:HTML+CSS实现炫酷登录切换的项目实践

发布日期:2024/2/20
手机扫二维码直达本页
发布时间:13:58:45
点  击:12
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,奇安信网站卫士提供加速防护
运行时间载入中.....