使用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 ...
| |