CSS 溢出

CSS 溢出指的是在元素容器中，内容超过了容器能够承载的范围，产生了溢出现象。此时，开发人员就需要对溢出的内容进行适当地处理，并且让其在页面中呈现出所期望的效果。

以下是一些常见的 CSS 溢出处理方式：

1. overflow 属性

使用 overflow 属性可以控制容器的滚动行为。默认情况下，容器超出部分会显示在容器之外。而当为容器设置了 overflow: auto 或 overflow: scroll，则可以控制容器出现滚动条的情况。

div {
  overflow: auto;
}

2. text-overflow 属性

text-overflow 属性只有在容器内容出现在单行且是被截断的情况下才会起到作用。通过设置容器的 text-overflow 属性，可以指定在内容溢出时如何显示。

div {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

3. word-break 和 word-wrap 属性

当容器中的文本超出容器宽度时，可以使用 word-break 和 word-wrap 属性来控制单词的折行和自动换行。

div {
  word-break: break-all; /* 允许单词被截断折行 */
  word-wrap: break-word; /* 自动换行 */
}

总结：

以上就是 CSS 溢出的常见处理方式。掌握这些常用的属性和方法，对于开发时界面排版和布局有很大的帮助。