當頁面上的元素過寬無法在螢幕上完全顯示時，水平捲動條會出現。大多數 WordPress 主題不使用水平捲動，因為這會破壞站點佈局並混淆使用者。
在本篇文章中，我們將展示如何輕鬆在 WordPress 中禁用溢出並移除水平捲動條。
什麼會導致 WordPress 中的水平捲動條或溢出？
在設置 WordPress 網站時，讓其對所有人都友好且可訪問是很重要的。如果某個元素的寬度超過了網站佈局，WordPress 就會顯示水平捲動條，這種情況稱為「溢出」。有了水平捲動條，網站的設計可能會被破壞，並減少友好度。
具有水平和垂直捲動條的網頁也可能讓訪問者感到混亂，難以導航。這會導致用戶離開網站，從而降低轉換率和銷售量。禁用溢出將使您的網站更友好，創造固定寬度佈局，並提升整體響應度。
方法 1：使用主題自定義器添加 CSS 片段
您可以通過在主題自定義器的「附加 CSS」選項中添加 CSS 代碼來禁用 WordPress 中的溢出。
只需從 WordPress 儀表板訪問「外觀」»「自定義」頁面。
注意：您可能會看到「外觀」»「編輯器」而不是「自定義」。這意味著您的主題使用的是全站編輯器（FSE），而不是主題自定義器。此時，您應查看我們的指南，了解如何解決缺少主題自定義器的問題或使用下方的方法 2。
進入自定義頁面後，點擊「附加 CSS」標籤。然後，簡單複製並粘貼以下代碼：
html, body {
max-width: 100%;
overflow-x: hidden;
}
完成後，任何溢出都將被移除，您可以在網站的即時預覽窗口中看到應用效果。別忘了當完成時點擊頁面頂部的「發佈」按鈕！
方法 2：使用 WPCode 添加 CSS 片段
您也可以通過使用 WPCode 插件來添加 CSS 代碼片段。
WPCode 是市場上最優秀的 WordPress 代碼片段插件，已有超過 100 萬個網站在使用。我們推薦這種方法，因為該插件使您無需編輯任何主題文件即可輕鬆添加自定義代碼。
首先，在您的網站上安裝並激活 WPCode 插件。詳細信息，您可以參考我們的分步指南，了解如何安裝 WordPress 插件。
注意：WPCode 也有免費版本。然而，您需要該插件的高級計劃才能解鎖「CSS 片段」選項。
激活後，從 WordPress 儀表板訪問「代碼片段」»「+ 添加片段」頁面。
到達此處後，點擊「添加自定義代碼（新片段）」選項下的「使用片段」按鈕。
這會帶您進入「創建自定義片段」頁面，您可以從這裡為代碼片段輸入標題。這個名稱不會顯示給用戶，只是方便您識別。
接下來，從右側的下拉選單中選擇「CSS 片段」作爲代碼類型。
注意：如果您使用的是免費 WPCode 插件，那麼您需要選擇「通用片段」選項。
之後，將以下 CSS 代碼片段複製並粘貼到「代碼預覽」框中：
<style type="text/css">
html, body {
max-width: 100%;
overflow-x: hidden;
}
</style>
完成後，向下滾動到「插入」部分，您會看到兩個選項，「自動插入」和「短代碼」。
在此處，選擇「自動插入」模式以在激活後自動執行您的代碼。
然而，如果您只想在某些特定頁面上禁用水平捲動條，則可以選擇「短代碼」模式。
這樣做後，WPCode 會在片段激活後提供一個短代碼，您可以將其粘貼在特定網站區域或頁面上以移除溢出。
選擇好選項後，轉到頁面頂部，在右上角將開關從「未啟用」切換到「啟用」。然後只需點擊「保存片段」按鈕。
就這樣！您已成功移除您網站上的任何水平溢出捲動條。
額外提示：在 WordPress 中添加自定義捲動條
禁用水平捲動條後，您還可以添加自定義捲動條。例如，如果您的網站根據品牌色彩使用特定配色方案，那麼您可以使用相同的顏色作爲捲動條配色。這樣看起來視覺上更具吸引力，並鼓勵用戶探索您的網站。
要創建自定義捲動條，安裝並激活 Advanced Scrollbar 插件。詳情，請參閱我們的初學者指南，了解如何安裝 WordPress 插件。
激活後，從 WordPress 儀表板訪問「設置」»「高級捲動條設置」頁面。從這裡，您現在可以根據自己的喜好更改捲動條的顏色。
完成後，點擊「保存更改」按鈕來儲存設置。更多信息，請參閱我們的教程，了解如何在 WordPress 中添加自定義捲動條。
我們希望本篇文章幫助您了解如何在您的 WordPress 網站上禁用溢出。您可能還想查看我們的專家推薦清單，了解必備的 WordPress 插件，以增長您的網站，以及我們的初學者指南，了解如何在 WordPress 中創建聯絡表單。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。
