css記錄1:文字塊內超長只顯示一行,且超過寬度顯示為省略號

niewj 發表於 2022-06-20
CSS

css格式說明

塊內容文字超長後只顯示1行, 且超過寬度,顯示為省略號(...)

html內容

<body>
    <div>這是一段可能慧衣櫥的啊kjkad安定客家話接電話發來的易哈佛的環刀法就好啦對焊法蘭很驕傲了東航飛機氯化膽鹼哈啊達到的</div>
</body>

style樣式

div {
    width: 300px;
    height: 100px;
    border: 1px solid red;

    /** 只顯示一行
        超過顯示省略號
    */
    text-overflow: ellipsis; /** 超過顯示省略號 */
    white-space: nowrap; /** 禁止文字自動換行 */
    overflow: hidden; /** 超過的隱藏(預設"visible") */
}

原始樣式圖

image.png

加了樣式後:

image.png