[HTML] 頁面卷軸的設置方法

Last Updated on 2021-06-03 by Clay

[註：當初寫下這篇文章時的語法適用於當初的版型，如今更迭過幾次版本，可能會在當前版型的展示出現 BUG]

在使用 HTML 撰寫網頁的過程中，若是我們想要顯示的文字長度過長，很容易出現意外斷行的情況。這時候，我們可以設置頁面的『卷軸』，讓使用者可以藉由拖曳下方的卷軸來滾動頁面。

若是想要查找 HTML 的語法，推薦前往以下這個網址：https://www.w3schools.com/html/ ，這個網頁裡面的指令非常齊全，可以自由查找自己想要的功能。

那麼，直接來實際看一下程式吧！

overflow 設定

首先我們來看個簡單的例子：

<div>
    1111
</div>

Output:

可以看到，畫面顯示 “1111”。那麼今天，如果我們的程式顯示非常多個 1 呢？

<div>
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
</div>

Output:

可以看到，這些 “1” 本來都是全部連在一起的字串，可是卻在顯示的頁面當中被換行了。如果不想出現這樣的情況、而是希望可以給使用者一條可以捲動的卷軸，我們應該要將 HTML 的語法修改為：

<div style="overflow:auto; width: auto;">
<pre style="white-space:nowrap;">
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
</pre></div>

Output:

111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

可以看到，我們顯示出的文字真的可以用捲軸來呈現了！

值得一提的是，如果想要隱藏水平卷軸，可以使用：

overflow:scroll;overflow-X:hidden; 

如果想要隱藏垂直卷軸，可以使用：

overflow:scroll;overflow-Y:hidden;