在網(wǎng)頁設(shè)計中，我們經(jīng)常使用 CSS 來控制字體的大小、顏色、樣式等等。但是，當(dāng)我們將字體放在一個盒子里時，有時候會遇到一個非常討厭的問題：當(dāng)字體超出盒子的范圍時，會被自動截斷成“..”，這樣會影響文本的可讀性。

.box{
width: 200px;
height: 100px;
font-size: 20px;
overflow: hidden;
}
.box p{
text-overflow: ellipsis;
white-space: nowrap;
}

上面的代碼，其中 ".box" 是我們所定義的一個盒子，我們將它的寬度設(shè)為了 200 像素，高度設(shè)為了 100 像素。"font-size" 屬性規(guī)定了盒子內(nèi)文本的大小為 20 像素，"overflow" 屬性規(guī)定了超出盒子范圍的內(nèi)容隱藏起來。接下來，在 ".box p" 中，我們使用了兩個 CSS 屬性：

• "text-overflow: ellipsis;"，表示當(dāng)文本超出父容器時使用省略號來表示；
• "white-space: nowrap;"，表示不允許文本換行。

有了這兩個屬性的設(shè)置，當(dāng)文本超出父容器限制時，會自動出現(xiàn)省略號，這樣可以保證文本內(nèi)容不會從盒子中溢出。

總之，使用 CSS 的 text-overflow 和 white-space 屬性可以很好的解決字體超出盒子問題，同時也可以提高文本的可讀性和美觀性。