如果在 WordPress 中撰寫一些程式相關的內容，通常我們都會希望程式碼的文字格式和一般文章會稍微有點不一樣，讓程式碼的閱讀性更佳。以本網站來說，目前使用了 Enlighter Sourcecode 這個外掛套件來存放程式碼的內容。不過當網站在小螢幕的裝置上閱讀的時候，會發現預設的格式是不會出現水平卷軸的，而是以斷行的方式呈現，這對程式碼來說在閱讀上實在有些的不方便。

▍ 只需調整 CSS 屬性讓水平卷軸自動隱藏或出現，不讓畫面切斷程式碼

調整的方法很簡單，只需要修改 .enlighter-default 的 CSS Code：

.enlighter-default {
    overflow: auto !important;
    white-space: pre !important;
}

調整 overflow 和 white-space 這兩個屬性，並且其中 !important 可以視情況選擇要不要加入，調整完後就會自動視螢幕大小出現水平卷軸了！

Reference

• Horizontal scroll on small screen | EnlighterJS / Plugin.WordPress

Copyright announcement:
Photo by Rishabh Pammi on Unsplash