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

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

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

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

有了這兩個屬性的設置，當文本超出父容器限制時，會自動出現省略號，這樣可以保證文本內容不會從盒子中溢出。

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