CSS字體超出寬度的問題是在實際開發中經常遇到的問題，特別是當我們需要在頁面上展示一些長文本時。這時，文本可能會超出容器的寬度，導致展示效果不美觀。如何解決這一問題呢？本文將向你介紹兩種常用的解決方案。 方案一：使用word-break屬性 在CSS中，我們可以使用word-break屬性來控制長單詞和URL的換行方式。該屬性可以取以下值： - normal：默認行為，單詞和URL不會被斷開。 - break-all：強制單詞和URL換行。 - keep-all：禁止單詞和URL中間的換行。 通過設置break-all，可以強制單詞和URL換行，從而實現CSS字體超出寬度換行的效果。示例代碼如下： pre { white-space: pre-wrap; /* 將pre標簽中的換行符使用本地格式化 */ word-break: break-all; } 方案二：使用overflow屬性 在CSS中，還可以使用overflow屬性來實現寬度超出的內容自動換行的效果。該屬性可以取以下值： - visible：默認值，超出部分不被隱藏。 - hidden：超出部分被隱藏，對用戶不可見。 - scroll：超出部分被隱藏，但會顯示滾動條。 - auto：超出部分被隱藏，但會自動顯示滾動條。 通過設置overflow屬性的值為auto，在內容超出容器的寬度時，會自動將內容進行換行。示例代碼如下： pre { white-space: pre-wrap; /* 將pre標簽中的換行符使用本地格式化 */ overflow: auto; } 綜上所述，通過使用word-break屬性和overflow屬性，我們可以很容易地實現CSS字體超出寬度換行的效果，讓頁面更加美觀、易讀。