DIV 隱藏超出寛度的文字

由於某些網頁儲存檔的檔名太長又懶得改,在呈現連結時,都會超過寬度而折行,我想讓它就是單獨一行,這應該動用 DIV 的 CSS 屬性控制了……。我需要幾種屬性設定:(底下只呈現文字,不呈現連結)

  1. 區塊寬度:width 屬性(過長文字折行)
    width: 600px;

    2014年08月11日 – 【漁村的黃昏】– 一個曾經在少年人生寫下一小頁簡史的小漁村_數十年前一個因.html

  2. 文字不折行:white-space 屬性(不折行可能超出範圍而破壞版面)
    white-space: nowrap;

    2014年08月11日 – 【漁村的黃昏】– 一個曾經在少年人生寫下一小頁簡史的小漁村_數十年前一個因.html

  3. 超過寬度的文字隱藏:overflow 屬性(從超出位置截斷隱藏)
    overflow:hidden;

    2014年08月11日 – 【漁村的黃昏】– 一個曾經在少年人生寫下一小頁簡史的小漁村_數十年前一個因.html

  4. 行末代以 … 刪節號:text-overflow 屬性(末端改以 … 代替)
    text-overflow:ellipsis;

    2014年08月11日 – 【漁村的黃昏】– 一個曾經在少年人生寫下一小頁簡史的小漁村_數十年前一個因.html

完整的屬性碼如下:

width:600px;
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *