3.14 關於溢載

overflow

當內容超出元素區域的，用來定義該如何處理超出的內容。常見可選的值有：

• visible：這是預設值，即正常出現。

• hidden：直接隱藏。

• scroll：出現捲軸來滑動內容。

• auto：跟 scroll 一樣，但是是有必要(內容超出區域)時才出現捲軸。

註：如果只想針對水平方向或垂直方向來設定，也可分別使用 overflow-x 、 overflow-y 。

範例 1：垂直方向

html

<div class="test_div">
  這是 div 的內容這是 div 的內容這是 div 的內容這是 div 的內容這是 div 的內容
</div>

css

div.test_div{
  border: 2px solid red;
  width: 100px;
  height: 100px;
}

結果如圖：

css 改成：

div.test_div{
  border:2px solid red;
  width: 100px;
  height: 100px;
  
  /* 加上以下這行 */
  overflow: hidden;
}

結果如圖：

或 css 改成如下：

div.test_div{
  border:2px solid red;
  width: 100px;
  height: 100px;
  
  /* 加上以下這行 */
  overflow: scroll;
}

範例 2：水平方向

html

<div class="test_div">
  這是 div 的內容這是 div 的內容這是 div 的內容這是 div 的內容這是 div 的內容
</div>

css

div.test_div{
  border:2px solid red;
  width: 100px;
  white-space:nowrap;
}

結果如圖：

將 css 改成：

div.test_div{
  border:2px solid red;
  width: 100px;
  white-space: nowrap;
  
  /* 加上以下兩行 */
  overflow: scroll; /* 或 auto 也行 */
  height: 40px;
}

結果如圖：

text-overflow

文字超出區域時，該如何處理：

• clip：這是預設值。直接遮掉。

• ellipsis：出現省略符號 ... 。

範例：限制單行，超出的話，尾端出現 … 省略符號

div.test_div{
  border:2px solid red;
  width: 100px;
  
  /* 不斷行 */
  white-space: nowrap;
  
  /* 隱藏 */
  overflow: hidden;
  
  /* 尾端出現省略符號 */
  text-overflow: ellipsis;
}

結果如圖(文字超出部份，直接出現省略符號)：

例：

其它：多行時也出現省略符號

皆是實驗性質的 CSS，不保證瀏覽器一定支援度。例：