在網(wǎng)頁設(shè)計(jì)過程中，我們經(jīng)常會(huì)遇到一種情況就是 CSS 代碼超出顯示范圍。這個(gè)時(shí)候，我們需要通過一些技巧來讓它們在頁面上得以展示。一種比較常見的做法就是使用省略號(hào)來代替隱藏的部分。 為了實(shí)現(xiàn)這種效果，我們需要借助 CSS 的 text-overflow 屬性。text-overflow 屬性控制字體溢出元素框時(shí)的裁剪方式，它有以下幾個(gè)取值： 1. clip：表示裁剪超出部分； 2. ellipsis：表示使用省略號(hào)代替超出部分； 3. string：表示使用指定字符串代替超出部分。 在使用 text-overflow 屬性時(shí)，我們還需要將 overflow 屬性設(shè)置為 hidden，這樣才能實(shí)現(xiàn)文字超出省略號(hào)的效果。 下面是一個(gè)例子：

p {
width: 150px;
white-space: nowrap;  // 防止文字換行
overflow: hidden;
text-overflow: ellipsis;
}

上述代碼表示，當(dāng) p 元素的寬度超過 150 像素時(shí)，文字會(huì)被隱藏，并用省略號(hào)代替。 需要注意的是，text-overflow 屬性只對單行文本有效，如果要處理多行文本，我們可以使用 JavaScript 來實(shí)現(xiàn)。 總之，將 text-overflow 屬性與 overflow 屬性配合使用可以很好地處理 CSS 代碼超出顯示的問題，使頁面內(nèi)容更加美觀整潔。