ホームページ > 記事 > ウェブフロントエンド > cssオーバーフロープロパティ
定義と使用法
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>