Last Updated on 2021-10-17 by Clay
Since I changed the WordPress theme to Neve, I found that the code embedded in the article using Custom HTML block was automatically wrapped, and the Code block horizontal scroll bar has also disappeared.
This is not an accident for me.
Among the several themes I have used in the past, some themes will make my custom HTML block horizontal scroll bar invalid.
But at the time I was not familiar with WordPress enough, and secondly, there are always more urgent things on hand. So I always change the theme until that makes my custom HTML work properly.
But because of the Neve theme that I changed this time, I like it very much, so I am determined to solve this problem.
Solution
The conclusion is that even after reading the whole source code of my website, I still did not find the programming setting of Neve theme. I think it is be attributed to my insufficient ability.
Finally, I add the customize CSS code to set them.
Add CSS stylesheet
Go to the wp-admin backend, select Appearance > Customize.
After finding the additional CSS stylesheet, set the class to be used for the custom HTML block. Here I named it "ccode", which means colorful code.
/* custom html css style */
.ccode {
display: block;
overflow-x: auto;
white-space: pre;
}Publish it.
Next, let's look at the difference between using this class or not, and use my website demo directly. (of course, if one day I change the theme, this demo will become invalid)
The following is a set of control blocks before and after modification.
Before modification (code)
<pre>
print("------------------------------------------------------------------------------------------------")
</div>Before modification (custom HTML block)
print("------------------------------------------------------------------------------------------------")
After modification (code)
<pre class="ccode">
print("------------------------------------------------------------------------------------------------")
</pre>After modification (custom HTML block)
print("------------------------------------------------------------------------------------------------")
Have you successfully restored the horizontal scroll bar to work?
References
- https://www.w3schools.com/cssref/pr_text_white-space.asp
- https://wordpress.org/support/topic/tables-do-not-scroll-horizontally-and-force-text-to-wrap-on-mobile/