cssオーバーフロープロパティ-CSSチュートリアル-php.cn

cssオーバーフロープロパティ

高洛峰

リリース： 2016-11-24 10:09:19

オリジナル

1633 人が閲覧しました

定義と使用法
overflow 属性は、コンテンツが要素ボックスからオーバーフローした場合に何が起こるかを指定します。
説明
この属性は、要素のコンテンツ領域をオーバーフローするコンテンツがどのように処理されるかを定義します。値がスクロールの場合、ユーザーエージェントは、必要かどうかに関係なく、スクロールメカニズムを提供します。したがって、すべてが要素ボックス内に収まる場合でも、スクロールバーが表示される可能性があります。

overflow 属性値:
1.visible: デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
2.hidden: コンテンツはトリミングされ、残りのコンテンツは非表示になります。
3.scroll: コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロールバーが表示されます。
4.auto: コンテンツがトリミングされている場合、ブラウザーには残りのコンテンツを表示するためのスクロールバーが表示されます。
5.inherit: オーバーフロー属性の値を親要素から継承することを指定します。
概要: オーバーフロー属性値において、表示と非表示は反対であり、スクロールと自動は反対です。継承とは、親要素のオーバーフロー属性値を継承することです。デフォルトはスクロールです。

シナリオ: テキストボックスは意見を表現するために使用されます。スクロールバーは表示されず、コンテンツが指定された表示スペースを超えると、テキストは表示されなくなります。を入力することができます。
コード:

Html代码 
<table border=1 cellspacing=0 cellpadding=0> 
    <tr> 
        <td colspan="4" align="left" height="40px" 
            style="FONT-FAMILY: 宋体; FONT-SIZE: 12pt;"> 
 
            <table border=0 cellspacing=0 cellpadding=0 width=100%> 
                <tr> 
                    <td colspan=2> 
                        审计单位意见: 
                    </td> 
                </tr> 
                <tr> 
                    <td colspan=2> 
                        <textarea rows="8" cols="120" style="overflow: hidden"></textarea> 
                    </td> 
                </tr> 
                <tr> 
                    <td width="44%"> 
                          
                    </td> 
                    <td style="padding-left: 100px;"> 
                        <input type="text" size="8" maxsize="4" align="center" 
                            style="border: none;"> 
                        年 
                        <input type="text" size="4" maxsize="2" align="center" 
                            style="border: none;"> 
                        月 
                        <input type="text" size="4" maxsize="2" align="center" 
                            style="border: none;"> 
                        日 
                    </td> 
                </tr> 
            </table> 
        </td> 
    </tr> 
    </tr> 
    <tr> 
        <td colspan="4" align="left" height="40px" 
            style="FONT-FAMILY: 宋体; FONT-SIZE: 12pt;"> 
            <table border=0> 
                <tr> 
                    <td> 
                        发包人意见: 
                    </td> 
                </tr> 
                <tr> 
                    <td colspan=2> 
                        <textarea rows="8" cols="120" style="overflow: hidden;"></textarea> 
                    </td> 
                </tr> 
                <tr> 
                    <td width="44%"> 
                          
                    </td> 
                    <td style="padding-left: 100px;"> 
                        <input type="text" size="8" maxsize="4" align="center" 
                            style="border: none;"> 
                        年 
                        <input type="text" size="4" maxsize="2" align="center" 
                            style="border: none"> 
                        月 
                        <input type="text" size="4" maxsize="2" align="center" 
                            style="border: none"> 
                        日 
                    </td> 
                </tr> 
            </table> 
        </td> 
    </tr> 
</table>

ログイン後にコピー