Note: The method when writing this article is applicable to the original version. Now that it has been changed several times, there may be a BUG in the following demo of the current version but you still can try it.
In the process of using HTML to build a webpage, if the length of the text we want to display is too long, it is easy to accidentally break the line. At this time, we can set the scroll of the page so that the user can scroll the page by dragging the scroll bar.
If you want to find more instructions of HTML, I recommend going to this website: https://www.w3schools.com/html/.
So, let’s take a look at the program.
overflow setting
First let’s look at a simple example:
<div> 1111 </div>
Output:
As you can see, the screen displays 1111. So today, what if our program shows a lot of 1?
<div> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 </div>
Output:
As you can see, these 1 were originally all connected strings, but they were wrapped in the displayed page. If you don’t want this situation, but want to give the user a scrollable scroll, we should modify the HTML syntax to:
<div style="overflow:auto; width: auto;"> <pre style="white-space:nowrap;"> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 </pre></div>
Output:
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
As you can see, the text we displayed can really be presented with a scroll!
It is worth mentioning that if you want to hide the horizontal scroll, you can use:
overflow:scroll;overflow-X:hidden; If you want to hide the vertical scroll, you can use:
overflow:scroll;overflow-Y:hidden;