博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
-webkit-line-clamp 实现限制文字显示多行,多余的用...
阅读量:7001 次
发布时间:2019-06-27

本文共 539 字,大约阅读时间需要 1 分钟。

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:

display: -webkit-box;必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。

-webkit-line-clamp:<number>

number用于显示的行数

-webkit-box-orient 默认是水平的,当值设为vertical时为垂直排列

css {

overflow : hidden;

text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

}

转载于:https://www.cnblogs.com/cndxk/p/4581263.html

你可能感兴趣的文章
哈佛结构与冯?诺伊曼结构区别
查看>>
耶鲁大学心态 ,送给正在奋斗的人 !
查看>>
磁盘空间耗尽(deleted)
查看>>
ansible任务的异步执行
查看>>
模拟计算器
查看>>
yum本地及网络仓库创建
查看>>
命令行编辑
查看>>
CentOS挂载ntfs文件系统
查看>>
aix下的mpio、rdac、sddpcm多路径软件操作
查看>>
fedora备份winxp fat32格式中文文件
查看>>
css link和@import区别用法
查看>>
HA+LB+NAS:三层架构实现群集高可用和高性能
查看>>
硬盘分区扩容
查看>>
Predicting purchase behavior from social media-www2013
查看>>
SAN,NAS,DAS及iSCSI其架构之间区别
查看>>
生产者和消费者
查看>>
BUAA-OO-第一单元总结
查看>>
html5贪吃蛇小游戏
查看>>
基本 Unix /linux 命令
查看>>
如何理解深度学习中分布式训练中large batch size与learning rate的关系
查看>>