text-overflow ellipsis 自動截斷超出範圍的文本

今天前端同事問了一個小技巧的問題，怎麼控制超出範圍的文本自動截斷，給她寫完後來普渡下衆生`(*∩_∩*)′

一、普通的文本段

對於普通的文本段的話只須要定義下面三個屬性

p {
   white-space: nowrap; /* 使內容不自動換行 對應的還有 normal 自動換行 */
   overflow: hidden; /* 超出容器範圍的內容隱藏 */
   text-overflow: ellipsis; /* 文本超出容器範圍以 ... 作截斷 */
}

<p>hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world </p>

    

二、表格的文本段

   當在表格中想要實現此效果時須要將此表格的 table-layout 設爲 fixed

table {
    width: 100%;
    table-layout: fixed; /* 必定要有此屬性 */
}
td {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

    其餘與普通文本段的定義沒區別