在網頁設計中，文字長度的控制是非常重要的一項任務。一些情況下，我們需要將文字長度縮短，以適應頁面的布局需要。那么，如何將 CSS 文字變短呢？下面介紹一些實用的方法。 一、使用 text-overflow 屬性 如果你想將超出文本框的文字變成省略號，可以使用 text-overflow 屬性。該屬性需要配合 white-space 和 overflow 屬性使用，代碼如下： ```css p { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 這樣設置后，如果該段落中的文字超出了 150px 的文本框范圍，就會自動變為省略號。 二、使用 word-break 屬性 如果你想強制將長單詞、長 url 或長字符串分成多行顯示，可以使用 word-break 屬性。值為 break-all 的 word-break 屬性可以強制分詞換行。代碼如下： ```css pre { word-break: break-all; } ``` 這樣設置后，如果有單詞長度超出了元素的寬度，該單詞就會被分成兩行。但是，這樣可能會破壞單詞的連續性，所以應該謹慎使用。 三、使用 font-size 屬性 如果你想直接縮小文本的字體大小，可以使用 font-size 屬性。代碼如下： ```css p { font-size: smaller; } ``` 這樣設置后，該段落的字體大小就會比原來少一個等級。但是，這樣對于跨瀏覽器兼容性不太友好。 總之，在網頁設計中，掌握如何將 CSS 文字變短是非常重要的。以上三種方法都是常用的實用技巧，如果你善加利用，就能快速、簡潔地將網頁文本優化到最佳狀態。