CSS | 溢出

在网页设计中，溢出是一个常见的问题。当内容超出容器的大小时，可以使用CSS来控制溢出。本文将介绍CSS中溢出的各种属性及其使用方法。

overflow

overflow属性指定在内容溢出其包含框（容器）时会发生什么。它接受以下值：

• visible：默认值。内容在容器外部可见。
• hidden：内容在容器外部不可见，被裁剪。
• scroll：在容器内添加滚动条。
• auto：在内容溢出时添加滚动条。

代码示例：

.container {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

text-overflow

text-overflow属性控制文本溢出容器时的处理方式。它只能应用于单行文本，且必须与white-space属性配合使用。

text-overflow接受以下两个值：

• clip：默认值。内容裁剪到容器大小以内。
• ellipsis：使用省略号来表示裁剪的文本。

代码示例：

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

word-wrap

word-wrap属性指定是否允许在单词内换行。它接受以下两个值：

• normal：默认值。单词在行尾被裁剪。
• break-word：在单词内换行。

代码示例：

.container {
  width: 200px;
  word-wrap: break-word;
}

white-space

white-space属性控制文本的空白处理方式。它接受以下三个值：

• normal：默认值。空格和换行符会被忽略，多余的空白也会被压缩。
• pre：空格和换行符会被保留，多余的空白也会被保留。
• nowrap：空格不会被忽略，但文本会在容器边缘自动换行。

代码示例：

.container {
  width: 200px;
  white-space: pre;
  overflow: hidden;
}

以上是CSS中与溢出相关的属性介绍。使用它们可以控制内容在容器内的显示方式，避免网页出现不美观的滚动条。