Last Updated on 2021-06-03 by Clay
[註:當初寫下這篇文章時的語法適用於當初的版型,如今更迭過幾次版本,可能會在當前版型的展示出現 BUG]
在使用 HTML 撰寫網頁的過程中,若是我們想要顯示的文字長度過長,很容易出現意外斷行的情況。這時候,我們可以設置頁面的『卷軸』,讓使用者可以藉由拖曳下方的卷軸來滾動頁面。
若是想要查找 HTML 的語法,推薦前往以下這個網址:https://www.w3schools.com/html/ ,這個網頁裡面的指令非常齊全,可以自由查找自己想要的功能。
那麼,直接來實際看一下程式吧!
overflow 設定
首先我們來看個簡單的例子:
<div> 1111 </div>
Output:
1111
可以看到,畫面顯示 "1111"。那麼今天,如果我們的程式顯示非常多個 1 呢?
<div> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 </div>
Output:
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
可以看到,這些 "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;