📕
HTML & CSS
  • 網頁設計 - HTML & CSS
  • 1 簡介
    • 1.1 講者簡介
    • 1.2 課程須知
    • 1.3 網站前端簡介
    • 1.4 開發工具簡介
    • 1.5 第一個網頁
  • 2 HTML
    • 2.1 html 文件基本結構
    • 2.2 宣告、標籤、屬性、元素
    • 2.3 保留文字格式
    • 2.4 表示程式的標籤
    • 2.5 註解
    • 2.6 網頁標題
    • 2.7 中介資料(Meta Data)
    • 2.8 縮寫
    • 2.9 斷行與水平分隔線
    • 2.10 段落
    • 2.11 內容標題
    • 2.12 判別區塊與行內
    • 2.13 列表
    • 2.14 清單
    • 2.15 連結
    • 2.16 圖片
    • 2.17 獨立內容
    • 2.18 表格
    • 2.19 嵌入外站
    • 2.20 span 和 div
    • 2.21 引用
    • 2.22 有結構的語意元素
    • 2.23 結構驗證
    • 2.24 HTML Entity(實體)
    • 2.25 影片
    • 2.26 音訊
    • 2.27 其它標籤
    • 2.28 表單
    • 2.29 HTML 所有標籤
  • 3 CSS
    • 3.1 套用 CSS
    • 3.2 註解
    • 3.3 Selectors - 屬性及值
    • 3.4 Selectors - 符號
    • 3.5 Selectors - class 和 id
    • 3.6 關於優先權
    • 3.7 排版 - 關於 display 屬性
    • 3.8 排版 - 區塊模型(Box Model)
    • 3.9 排版 - vertical-align 對齊
    • 3.10 練習 - 固定式版型
    • 3.11 關於 Pseudo Element
    • 3.12 關於 Pseudo Class
    • 3.13 文字樣式
    • 3.14 關於溢載
    • 3.15 連結樣式
    • 3.16 列表樣式
    • 3.17 表格樣式
    • 3.18 背景樣式
    • 3.19 排版 - 關於定位(position)
    • 3.20 排版 - 關於浮動(float)
    • 3.21 關於不透明度 opacity
    • 3.22 關於 visibility、pointer-events
    • 3.23 關於 outline
    • 3.24 表單樣式
    • 3.25 效果 - 游標
    • 3.26 效果 - 圓角
    • 3.27 效果 - 區塊陰影
    • 3.28 效果 - 文字陰影
    • 3.29 效果 - 轉換 transform
    • 3.30 Flexbox 排版 - Container
    • 3.31 Flexbox 排版 - Items
    • 3.32 Column 多欄排版模式
    • 3.33 其它補充
  • 4 練習
  • 5 作業:網頁切版
  • 6 參考資料
Powered by GitBook
On this page
  • overflow
  • 範例 1:垂直方向
  • 範例 2:水平方向
  • text-overflow
  • 範例:限制單行,超出的話,尾端出現 … 省略符號
  • 其它:多行時也出現省略符號
  1. 3 CSS

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,不保證瀏覽器一定支援度。例:

Previous3.13 文字樣式Next3.15 連結樣式

Last updated 1 year ago