1. 前言
在网页中，文本内容的出现是经常存在的，但是当文本长度过长的时候，就会出现文本溢出容器的问题。为此，我们需要使用CSS实现多行文本溢出隐藏。
2. CSS实现多行文本溢出隐藏
文本溢出隐藏主要有两种方式，分别是使用`text-overflow`属性和使用`overflow`属性。
2.1 `text-overflow`属性
`text-overflow`属性定义当文本溢出包含它的元素时，应该发生什么。`text-overflow`属性只在**块容器**中生效，文本必须在实现文本截断的同时被包裹在要剪裁的块容器中。
2.1.1 `text-overflow`属性的语法
text-overflow: clip|ellipsis|string;
- `clip`：默认值，表示截断文本并且不添加省略号。
- `ellipsis`：使文本溢出容器时添加省略号。
- `string`：定义替换的字符串。
2.1.2 `text-overflow`属性的使用
/* 在块容器中使用text-overflow */
.container {
white-space: nowrap; /* 使文本在一行中显示 */
width: 200px; /* 指定容器宽度 */
overflow: hidden; /* 溢出内容隐藏 */
text-overflow: ellipsis; /* 文本溢出时添加省略号 */
}
2.1.3 `text-overflow`属性的效果
2.2 `overflow`属性
`overflow`属性用于控制一个块容器内内容溢出时的表现形式。通常与`white-space`属性和`text-overflow`属性之类的相关样式一起使用。
2.2.1 `overflow`属性的语法
overflow: visible|hidden|scroll|auto;
- `visible`：默认值。
- `hidden`：超出隐藏。
- `scroll`：超出可滚动。
- `auto`：根据文本大小自适应。
2.2.2 `overflow`属性的使用
/* 在块容器中使用overflow */
.container {
white-space: nowrap; /* 使文本在一行中显示 */
width: 200px; /* 指定容器宽度 */
overflow: hidden; /* 溢出内容隐藏 */
}
2.2.3 `overflow`属性的效果
3.总结
在实际开发中，文本溢出超出容器是一个常见的问题。如果我们希望在文本溢出时使用省略号，我们可以使用`text-overflow: ellipsis`属性。如果我们希望把超出容器的部分隐藏，我们可以使用`overflow: hidden`属性。这些属性的灵活应用，可以让我们方便地处理文本溢出的情况。