CSS 溢出 y 3 点

CSS 溢出 y 3 点是一种在 CSS 中控制元素在 Y 轴方向上超出容器大小时如何显示的方法。CSS 溢出 y 3 点允许您定义元素的上、下或两者都溢出容器时的行为。

overflow-y 属性

要使用CSS溢出y 3点，请使用以下CSS属性：

overflow-y: visible | hidden | scroll | auto | initial | inherit;

可选值

• visible：元素内容在容器外依然可见，超出容器大小的部分将完全可见。
• hidden：元素内容在容器外不可见，被隐藏。
• scroll：在超出容器大小时显示滚动条，使用户可以滚动查看所有内容。
• auto：自动决定是否显示滚动条，如果内容超出容器大小，将显示滚动条。
• initial：将属性设置为其默认值。
• inherit：从父元素继承该属性值。

示例

以下CSS设置使元素在容器外隐藏溢出的内容：

div {
  width: 200px;
  height: 100px;
  overflow-y: hidden;
}

以下CSS设置使元素在容器外显示滚动条来查看溢出的内容：

div {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
}

word-wrap 属性

如果您需要在缩小浏览器窗口大小时防止文本换行，可以使用word-wrap属性。

可选值

• normal：默认情况下，单词会在它们的边界处自动换行。
• break-word：如果一个单词太长，它将在边界处断开。

示例

以下CSS设置使在浏览器窗口缩小时防止长单词的换行：

div {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
  word-wrap: break-word;
}

text-overflow 属性

在展示一些文本时，当文本太长比容器更宽时，使用text-overflow属性可以截断文本并以省略号（...）结束。

可选值

• clip：默认情况下，文本截断并隐藏。
• ellipsis：文本截断并以省略号（...）结束。

示例

以下CSS设置使文本截断并以省略号（...）结束：

div {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
  text-overflow: ellipsis;
  white-space: nowrap;
}

注意使用 white-space: nowrap; 属性可以防止文本换行。

这就是CSS溢出 y 3点的基本知识。要了解更多信息，请查看 MDN文档。