扫描二维码打开
在我们编辑单行文本或者多行文本时文本溢出时,我们该如何进行隐藏呢?今天就来介绍一下单行文本溢出隐藏和多行文本超出指定行数隐藏的方法。
一、单行文本溢出隐藏
width: 250px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
代码说明:
(1)width: 250px; (固定宽度)
(2)white-space: nowrap; (不换行)
(3)text-overflow: ellipsis; (省略号)
(4)overflow: hidden; (多余部分隐藏)
二、多行文本超出指定行数隐藏
display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow: hidden;
代码说明:
(1)display: -webkit-box; (兼容性)
(2)-webkit-line-clamp:3;(指定显示行数)
(3)-webkit-box-orient: vertical;(文本垂直排列)
(4)overflow: hidden; (多余部分隐藏)
Copyright 深圳市某某科技有限公司 版权所有. 备案号:粤ICP备98989988号