3.14 關於溢載
overflow
當內容超出元素區域的,用來定義該如何處理超出的內容。常見可選的值有:
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
文字超出區域時,該如何處理:
範例:限制單行,超出的話,尾端出現 …
省略符號
div.test_div{
border:2px solid red;
width: 100px;
/* 不斷行 */
white-space: nowrap;
/* 隱藏 */
overflow: hidden;
/* 尾端出現省略符號 */
text-overflow: ellipsis;
}
結果如圖(文字超出部份,直接出現省略符號):
例:
其它:多行時也出現省略符號
皆是實驗性質的 CSS,不保證瀏覽器一定支援度。例: