流式布局和溢出

什么是溢出？

给一个元素一个固定的高度和宽度，然后向盒子里添加大量内容，就会创建一个基本的溢出示例。

html

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>
</div>
<p>
  Their names were Stephen and Joseph Montgolfier. They were papermakers by
  trade, and were noted as possessing thoughtful minds and a deep interest in
  all scientific knowledge and new discovery.
</p>
<p>
  Before that night—a memorable night, as it was to prove—hundreds of millions
  of people had watched the rising smoke-wreaths of their fires without drawing
  any special inspiration from the fact.
</p>

css

body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
}

内容进入盒子。一旦填满盒子，它就会以可见的方式继续溢出，将内容显示在盒子外部，可能会显示在后续内容下方。控制溢出行为的属性是overflow属性，其初始值为visible。这就是为什么我们可以看到溢出内容的原因。

控制溢出

还有其他值可以控制溢出内容的行为。要隐藏溢出内容，请使用hidden值。这可能会导致您的某些内容不可见。

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>
</div>
<p>
  Their names were Stephen and Joseph Montgolfier. They were papermakers by
  trade, and were noted as possessing thoughtful minds and a deep interest in
  all scientific knowledge and new discovery.
</p>
<p>
  Before that night—a memorable night, as it was to prove—hundreds of millions
  of people had watched the rising smoke-wreaths of their fires without drawing
  any special inspiration from the fact.
</p>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow: hidden;
}

使用scroll值会将内容包含在其盒子里，并添加滚动条以启用查看。即使内容适合盒子，也会添加滚动条。

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>
</div>
<p>
  Their names were Stephen and Joseph Montgolfier; they were papermakers by
  trade and were noted as possessing thoughtful minds and a deep interest in all
  scientific knowledge and new discoveries.
</p>
<p>
  Before that night—a memorable night, as it was to prove—hundreds of millions
  of people had watched the rising smoke-wreaths of their fires without drawing
  any special inspiration from the fact.
</p>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow: scroll;
}

如果内容适合盒子，使用auto值将显示内容而没有滚动条。如果不适合，则会添加滚动条。比较下一个示例，您应该看到上面的overflow: scroll示例具有水平和垂直滚动条，即使它只需要垂直滚动。下面的auto示例只在我们需要的方向上添加滚动条。

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>
</div>
<p>
  Their names were Stephen and Joseph Montgolfier, they were papermakers by
  trade, and were noted as possessing thoughtful minds and a deep interest in
  all scientific knowledge and new discovery.
</p>
<p>
  Before that night—a memorable night, as it was to prove—hundreds of millions
  of people had watched the rising smoke-wreaths of their fires without drawing
  any special inspiration from the fact.
</p>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow: auto;
}

正如我们已经了解到的，使用这些值中的任何一个（除了默认的visible），都将创建一个新的块级格式化上下文。

overflow: clip 的行为类似于 overflow: hidden，但不允许通过编程方式滚动；盒子变为不可滚动。它也不会创建块格式化上下文。

overflow 属性实际上是 overflow-x 和 overflow-y 属性的简写。如果您只为 overflow 指定一个值，则该值将用于两个轴。但是，您可以指定两个值，在这种情况下，第一个值用于 overflow-x（即水平方向），第二个值用于 overflow-y（即垂直方向）。在下面的示例中，我只指定了 overflow-y: scroll，因此我们不会得到不必要的水平滚动条。

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>
</div>
<p>
  Their names were Stephen and Joseph Montgolfier, they were papermakers by
  trade, and were noted as possessing thoughtful minds and a deep interest in
  all scientific knowledge and new discovery.
</p>
<p>
  Before that night—a memorable night, as it was to prove—hundreds of millions
  of people had watched the rising smoke-wreaths of their fires without drawing
  any special inspiration from the fact.
</p>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow-y: scroll;
}

流相对属性

在书写模式和流式布局指南中，我们研究了block-size和inline-size属性，这些属性在处理不同书写模式时比将布局绑定到屏幕的物理尺寸更有意义。CSS溢出模块还包括溢出的流相对属性——overflow-block和overflow-inline。它们对应于overflow-x和overflow-y，但映射取决于文档的书写模式。

指示溢出

在 CSS 溢出模块中，有一些属性可以帮助改善内容在溢出情况下的外观。

内联轴溢出

text-overflow 属性处理内联方向的文本溢出。它接受两个值之一：clip，在这种情况下，内容在溢出时被剪裁，这是初始值，因此是默认行为。我们还有 ellipsis，它会渲染一个省略号，该省略号可能会被正在使用的语言或书写模式的更好字符替换。

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>

  <p>
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  border: 5px solid rebeccapurple;
  padding: 10px;
}

.box p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}