css溢出隐藏的五种方法

一、文本溢出
当容器中的文本内容超出容器的宽度或高度时，就会出现文本溢出的情况。下面介绍几种CSS实现文本溢出的方法。

单行文本溢出省略：
单行文本溢出省略通常用于标题等文本显示，可以通过设置white-space和text-overflow属性实现。white-space属性：用来设置元素中的空白如何处理，默认值为normal，即会自动忽略多余的空格和换行符。当设为nowrap时，文本不会换行。

text-overflow属性：用来控制溢出文本的显示方式，默认值为clip，即将溢出部分截去。当设置为ellipsis时，会显示省略号。

代码示例：

这是一段需要溢出省略的文本内容

二、多行省略

多行省略主要是用来实现在固定高度的容器中，将超出容器高度的文本省略掉。同样，对于单行文本省略，可以使用text-overflow属性，但对于多行省略，则需要结合其他属性来实现。

使用纯文本实现

通过调整行高和高度来实现多行文本省略。

代码示例：

这是一段需要省略的多行文本内容，如果文本过长会出现省略号

使用伪元素实现

通过伪元素在文本后面添加省略号来实现多行文本省略。

代码示例：

这是一段需要省略的多行文本内容，如果文本过长会出现省略号