CSS 属性 overflow

Docs

overflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。

overflow
/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

从下面列表中指定一个或者两个关键字来作为 overflow 属性。如果指定两个关键字，第一个关键字用于 overflow-x，第二个关键字用于 overflow-y。否则，overflow-x 和 overflow-y 设置为相同的属性值。

属性值

visible：内容不能被裁减并且可能渲染到边距盒（padding）的外部。
hidden：如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。
clip：类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。
scroll：如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。
auto：取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。
~~overlay：行为与 auto 相同，但是滚动条绘制在内容之上，而不是占据空间。~~

overflow 用于控制内容溢出时的行为

visible：溢出的内容照样可见
hidden：溢出的内容直接裁剪
scroll：溢出的内容被裁剪，但可以通过滚动机制查看
- 会一直显示滚动条区域，滚动条区域占用的空间属于 width、height
auto：自动根据内容是否溢出来决定是否提供滚动机制

HTML
CSS

<div class="css-properties-overflow-demo">
  <div class="visible">
    <code>visible</code>
    <p class="text">
      Vitamin, mineral and multivitamin supplements aren't likely to protect
      you from cancer, heart disease or overall mortality, the US Preventive
      Services Task Force said in updated guidelines released Tuesday in the
      journal
      JAMA.
    </p>
  </div>
  <div class="hidden">
    <code>hidden</code>
    <p class="text">
      Vitamin, mineral and multivitamin supplements aren't likely to protect
      you from cancer, heart disease or overall mortality, the US Preventive
      Services Task Force said in updated guidelines released Tuesday in the
      journal
      JAMA.美国预防医学工作组在 6 月 21 日发表在《美国医学会杂志》上的新指南中写道，维生素、矿物质和复合维生素补充剂无法保护你不患癌症、心脏病，也不能帮你延长寿命。
    </p>
  </div>
  <div class="scroll">
    <code>scroll</code>
    <p class="text">
      Vitamin, mineral and multivitamin supplements aren't likely to protect
      you from cancer, heart disease or overall mortality, the US Preventive
      Services Task Force said in updated guidelines released Tuesday in the
      journal
      JAMA.美国预防医学工作组在 6 月 21 日发表在《美国医学会杂志》上的新指南中写道，维生素、矿物质和复合维生素补充剂无法保护你不患癌症、心脏病，也不能帮你延长寿命。
    </p>
  </div>
  <div class="auto">
    <code>auto</code>
    <p class="text">
      Vitamin, mineral and multivitamin supplements aren't likely to protect
      you from cancer, heart disease or overall mortality, the US Preventive
      Services Task Force said in updated guidelines released Tuesday in the
      journal
      JAMA.美国预防医学工作组在 6 月 21 日发表在《美国医学会杂志》上的新指南中写道，维生素、矿物质和复合维生素补充剂无法保护你不患癌症、心脏病，也不能帮你延长寿命。
    </p>
  </div>
</div>

.css-properties-overflow-demo {
  width: 600px;
  background-color: #d7e9b9;
  color: #007;
  font-size: 16px;
  font-weight: bold;
}

.css-properties-overflow-demo div {
  margin: 10px;
  padding: 10px;
  background-color: #b7b78a;
}

.css-properties-overflow-demo div p {
  width: 500px;
  height: 80px;
  padding: 10px;
  border: 2px double #007;
  border-radius: 10px;
}

/* visible 超出部分继续显示 */
.css-properties-overflow-demo > div.visible > p.text {
  overflow: visible;
}

/* hidden 超出部分隐藏 */
.css-properties-overflow-demo > div.hidden > p.text {
  overflow: hidden;
}

/* scroll 超出部分显示滚动条 */
.css-properties-overflow-demo > div.scroll > p.text {
  overflow: scroll;
}

/* auto 超出部分显示滚动条，但是只有在必要的时候才显示 */
.css-properties-overflow-demo > div.auto > p.text {
  overflow: auto;
}

http://localhost:3000/css-properties-overflow.html

visible

hidden

Vitamin, mineral and multivitamin supplements aren't likely to protect you from cancer, heart disease or overall mortality, the US Preventive Services Task Force said in updated guidelines released Tuesday in the journal JAMA.美国预防医学工作组在6月21日发表在《美国医学会杂志》上的新指南中写道，维生素、矿物质和复合维生素补充剂无法保护你不患癌症、心脏病，也不能帮你延长寿命。

scroll

auto