CSS overflow(溢出)用法示例代码介绍 _CSSoverflow

CSS overflow控制着大内容。它指示是剪辑内容还是添加滚动条。overflow包含以下属性：

visible
hidden
scroll
auto

visible：内容不会被剪切, 并且在元素框外不可见。
例子：

< !DOCTYPE> < html> < head> < style> p { width:100px; height:80px; border:1px solid; overflow:visible; } < /style> < /head> < body> < h2> srcmini < /h2> < p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. < /p> < /body> < /html>

输出如下：
hidden：overflow被裁剪, 其余内容不可见。
例子：

< !DOCTYPE> < html> < head> < style> p { width:100px; height:80px; border:1px solid; overflow:hidden; } < /style> < /head> < body> < h2> srcmini < /h2> < p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. < /p> < /body> < /html>

【CSS overflow(溢出)用法示例代码介绍】输出如下：
scroll：溢出被裁剪, 但是添加了滚动条以查看其余内容。滚动条可以是水平或垂直的。
例子：

< !DOCTYPE> < html> < head> < style> p { width:120px; height:100px; border:1px solid; overflow:scroll; } < /style> < /head> < body> < h2> srcmini < /h2> < p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. < /p> < /body> < /html>

输出如下：
auto：它会在需要时自动添加滚动条。
例子：

< !DOCTYPE> < html> < head> < style> p { width:120px; height:100px; border:1px solid; overflow:auto; } < /style> < /head> < body> < h2> srcmini < /h2> < p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. < /p> < /body> < /html>

输出如下：
Overflow-x和Overflow-y：此属性指定如何更改元素的溢出。 x处理水平边缘, y处理垂直边缘。
例子：

< !DOCTYPE> < html> < head> < style> p { width:120px; height:100px; border:1px solid; overflow-x:scroll; overflow-y:hidden; } < /style> < /head> < body> < h2> srcmini < /h2> < p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. < /p> < /body> < /html>

输出如下：