使用CSS和HTML創建一個滾動文本框
HTML滾動框是一個框，當框的內容大於框尺寸時，將滾動條添加到右側和底部。 換句話說，如果你有一個可以容納50個單詞的盒子，並且你有200個單詞的文本，那麼一個HTML滾動框會把滾動條放到最上面，讓你看到額外的150個單詞。 在標準的HTML中，只需將額外的文本推到框外。
製作HTML滾動相當容易。 你只需要設置你想要滾動的元素的寬度和高度，然後使用CSS溢出屬性來設置你希望滾動發生的方式。
如何處理額外的文本？
當您的文字多於適合版面空間的文字時，您可以選擇以下幾種選擇：
- 重寫文本，使其更短並適合。
- 允許文本超出邊界，並希望佈局可以彎曲以支持它。
- 切掉溢出的文本。
- 添加滾動條（通常為文本垂直），以便空間滾動以顯示額外的文本。
最好的選擇通常是最後一個選項：創建一個滾動文本框。 然後額外的文本仍然可以閱讀，但您的設計不會受到影響。
HTML和CSS會是這樣的：
溢出：auto; 告訴瀏覽器在需要時添加滾動條，以防止文本溢出div的邊界。 但為了這個工作，你還需要div上設置的寬度和高度樣式屬性，以便有溢出的邊界。
您也可以通過更改溢出來切斷文本：auto; 溢出：隱藏; 如果省略溢出屬性，文本將溢出div的邊界。
您可以將滾動條添加到多個文本中
如果您想要在較小的空間中顯示較大的圖像，則可以按照與文本相同的方式在其周圍添加滾動條。
在本例中，400x509圖片位於300x300段落內。
表格可以從滾動條中受益
長信息表很難快速讀取，但通過將它們放入有限大小的div內，然後添加溢出屬性，可以生成包含大量數據的表格，這些數據不會佔用頁面上的極端空間。
最簡單的方法就像圖像和文本一樣，只需在表格中添加div，設置div的寬度和高度，然後添加overflow屬性：
| Name | Phone | |||
|---|---|---|---|---|
| Jennifer | 502-5366 .... 執行此操作時發生的一件事是通常會出現水平滾動條，因為瀏覽器假定滾動條的滾動條與表格重疊。 有很多方法可以通過更改表格和其他的寬度來解決這個問題。 但我最喜歡的是簡單地關閉CSS 3屬性overflow-x的水平滾動功能。 只需添加overflow-x：hidden; 到div，這將刪除水平滾動條。 請務必對此進行測試，因為可能會有內容消失。 Firefox支持使用TBODY標籤進行溢出Firefox瀏覽器的一個非常好的功能是，您可以在內部表格標籤（如tbody和thead或tfoot）上使用溢出屬性。 這意味著您可以在表格內容上設置滾動條，並且標題單元格保持錨定在其上方。 這只適用於Firefox ，這太糟糕了，但如果您的讀者只使用Firefox，這是一個很好的功能。 瀏覽到Firefox中的這個例子來看看我的意思。 | Jennifer | 502-5366 ...
| |