发布时间:2023-05-06 文章分类:WEB开发, 电脑百科 投稿人:王小丽 字号: 默认 | | 超大 打印

目录

一、单行文本溢出隐藏

二、多行文本超出指定行数隐藏


在我们编辑单行文本或者多行文本时文本溢出时,我们该如何进行隐藏呢?今天就来介绍一下单行文本溢出隐藏和多行文本超出指定行数隐藏的方法。

一、单行文本溢出隐藏

width: 250px; (固定宽度)

white-space: nowrap; (不换行)

text-overflow: ellipsis; (省略号)

overflow: hidden; (多余部分隐藏)

二、多行文本超出指定行数隐藏

display: -webkit-box; (兼容性)

-webkit-line-clamp:3;(指定显示行数)

-webkit-box-orient: vertical;(文本垂直排列)

overflow: hidden; (多余部分隐藏)