关于文字省略加省略号那些事儿

最新推荐文章于 2024-05-16 16:04:35 发布

原创最新推荐文章于 2024-05-16 16:04:35 发布 · 510 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

本文介绍了如何使用CSS实现文本内容的单行和多行省略处理，包括`white-space`属性控制换行，`overflow`隐藏多余内容，以及`-webkit-line-clamp`属性来限制行数并添加省略号。

文字省略大致分为单行省略加省略号,多行省略加省略号:
首先是单行省略,主要思想就是1.不换行 2.超出部分隐藏 3.加省略号
```css
/* 单行文字 */
.p1{
width: 100%;
line-height: center;
border-bottom: 1px solid #000;
/* 让文字在一行显示,不换行*/
white-space: nowrap;
/* 文本超出部分隐藏 */
overflow: hidden;
/* 超出部分添加省略号*/
text-overflow: ellipsis;
}
```
其次是多行省略 ,主要思想是:1.将盒子变为弹性伸缩的盒子 2.超出隐藏 3.限制文本显示的行数(根据个人实际情况定行数) 4.设置盒子的排序方式 5.加省略号
```css
/* 多行文字 */
.p2{
width: 100%;
border-bottom: 1px solid #000;
/* 将p2这个对象作为一个弹性伸缩的盒子模型 */
display: -webkit-box;
/* 文本超出部分隐藏 */
overflow: hidden;
/* 限制块级元素内文本显示的行数 */
-webkit-line-clamp: 3;
/* 设置盒子内子元素的排列方式 */
-webkit-box-orient: vertical;
/* 超出部分添加省略号 */
text-overflow: ellipsis;
}