流式佈局和溢位

什麼是溢位？

給一個元素一個固定的高度和寬度，然後向盒子裡新增大量內容，就會建立一個基本的溢位示例。

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;
}