Heim > Artikel > Web-Frontend > CSS-Überlaufeigenschaft
Definition und Verwendung
Das Überlaufattribut gibt an, was passiert, wenn Inhalt über die Elementbox hinausläuft.
Beschreibung
Dieses Attribut definiert, wie Inhalte behandelt werden, die über den Inhaltsbereich des Elements hinausgehen. Wenn der Wert scroll ist, stellt der Benutzeragent einen Scrollmechanismus bereit, unabhängig davon, ob er erforderlich ist oder nicht. Daher ist es möglich, dass Bildlaufleisten angezeigt werden, auch wenn alles in die Elementbox passt.
Überlaufattributwert:
1.visible: Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert.
2.versteckt: Der Inhalt wird gekürzt und der verbleibende Inhalt ist unsichtbar.
3. Scrollen: Der Inhalt wird gekürzt, aber der Browser zeigt Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.
4.auto: Wenn Inhalte zugeschnitten werden, zeigt der Browser Bildlaufleisten an, um den Rest des Inhalts anzuzeigen.
5.inherit: Gibt an, dass der Wert des Überlaufattributs vom übergeordneten Element geerbt werden soll.
Zusammenfassung: sichtbar und ausgeblendet sind Gegensätze im Überlaufattributwert, und Scroll und Auto sind Gegensätze. Bei „Erben“ wird der Überlaufattributwert des übergeordneten Elements geerbt.
Szenario: Die Bildlaufleiste wird nicht angezeigt, wenn der Inhalt den angegebenen Anzeigebereich überschreitet , keine weitere Texteingabe möglich.
Code:
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>