本文目錄導(dǎo)讀：

1. 文本溢出與隱藏
2. 文本溢出顯示方式

CSS并不直接處理字符串截取的任務(wù)，這通常是JavaScript或后端語(yǔ)言的職責(zé)，我們可以通過(guò)CSS的一些特性，間接地實(shí)現(xiàn)某些視覺(jué)上的“截取”效果，我們可以使用CSS的文本溢出（overflow）和文本溢出顯示方式（text-overflow）屬性來(lái)模擬字符串的截取。

以下是如何使用CSS來(lái)模擬字符串的截?。?/p>

文本溢出與隱藏

超過(guò)其包含元素的寬度時(shí)，我們可以使用CSS的overflow屬性來(lái)決定如何處理這種溢出，如果我們?cè)O(shè)置為hidden，那么溢出的部分將會(huì)被隱藏。

.container {
    width: 100px; /* 定義容器寬度 */
    white-space: nowrap; /* 防止文本換行 */
    overflow: hidden; /* 隱藏超出容器的文本 */
}

文本溢出顯示方式

為了更友好地展示被隱藏的文本，我們可以使用text-overflow屬性來(lái)指定當(dāng)文本溢出時(shí)應(yīng)該如何顯示，常用的值有clip（剪切）和ellipsis（省略號(hào)）。

.container {
    width: 100px; /* 定義容器寬度 */
    white-space: nowrap; /* 防止文本換行 */
    overflow: hidden; /* 隱藏超出容器的文本 */
    text-overflow: ellipsis; /* 當(dāng)文本溢出時(shí)顯示省略號(hào) */
}

這樣，當(dāng)文本長(zhǎng)度超過(guò)容器的寬度時(shí)，就會(huì)顯示為省略號(hào)，從而模擬了字符串的截取效果，但請(qǐng)注意，這只是視覺(jué)上的截取，實(shí)際的字符串并沒(méi)有被截取或修改，實(shí)際的字符串處理還需要依賴JavaScript或其他后端語(yǔ)言。

我們還可以利用CSS的偽元素(::before或::after)和content屬性來(lái)顯示部分被隱藏的文本，但這同樣只是視覺(jué)上的效果，實(shí)際的字符串內(nèi)容并未改變，CSS主要用于樣式和布局，而非處理字符串操作。