• overflow溢出处理


    语法:

    overflow : visible | auto | hidden | scroll

    相关属性:overflow-x , overflow-y

    取值:

    visible:
    不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
    auto:
    此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
    hidden:
    不显示超过对象尺寸的内容
    scroll:
    总是显示滚动条

    说明:

    1. 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
    2. 设置textarea对象为hidden值将隐藏其滚动条。
    3. 对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。

    示例:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>溢出处理</title>
        <style type="text/css">
            #cont1 div,#cont3 div,#cont5 div{width:300px; height:200px;}
            #cont2 div,#cont4 div,#cont6 div{width:100px; height:50px;}
            .cont{float:left; margin:4px; overflow:visible; padding:10px; width:200px; height:100px;}
            .cont,.cont div{border:2px solid red;}
        </style>
    </head>
    <body>
        <div id="cont1" class="cont" style="overflow-x:scroll; ">
            <div>style="overflow-x:scroll; "</div>
        </div>
        <div id="cont2" class="cont" style="overflow-x:scroll; ">
            <div>style="overflow-x:scroll; "</div>
        </div>
        <div id="cont3" class="cont" style="overflow-x:auto; ">
            <div>style="overflow-x:auto; "</div>
        </div>
        <div id="cont4" class="cont" style="overflow-x:auto; ">
            <div>style="overflow-x:auto; "</div>
        </div>
        <div id="cont5" class="cont" style="overflow-x:hidden; ">
            <div>style="overflow-x:hidden; "</div>
        </div>
        <div id="cont6" class="cont" style="overflow-x:hidden; ">
            <div>style="overflow-x:hidden; "</div>
        </div>
    </body>
    </html> 

     

  • 相关阅读:
    Eclipse Kepler安装WST Server Adapter后创建Server无Tomcat解决方法
    centos下Linux C语言MD5的使用
    解析JSON字符串
    切换view的动画
    设置菜单和工具条
    视图切换的几种方法
    scrollview 例子2
    UIScrollView
    iOS:翻页效果
    软件预构的艺术源码编译
  • 原文地址:https://www.cnblogs.com/zhourourou/p/5210596.html
Copyright © 2020-2023  润新知