Heim > Artikel > Web-Frontend > So realisieren Sie das automatische Ausblenden von Inhalten außerhalb von HTML
So realisieren Sie das automatische Ausblenden von Inhalten außerhalb von HTML
- 王林Original
- 2021-06-23 11:57:437529Durchsuche
Die Möglichkeit, HTML-Inhalte automatisch auszublenden, besteht darin, das Überlaufattribut zum Textinhalt hinzuzufügen und den Attributwert auf ausgeblendet zu setzen, z. B. [div{overflow: versteckt;}].
Die Betriebsumgebung dieses Artikels: Windows 10-System, HTML 5, Thinkpad T480-Computer.
Bei der tatsächlichen Arbeit müssen wir möglicherweise einen langen Text anzeigen, aber die Größe unseres Textfelds ist möglicherweise nicht so groß. Wie sollen wir das also tun? Tatsächlich ist es ganz einfach: Blenden Sie einfach den Inhalt außerhalb des Textfelds aus. Aber wie sollten wir es tun, um diesen Effekt zu erzielen?
Wir müssen nur das Überlaufattribut verwenden, um diesen Effekt zu erzielen.
Das Überlaufattribut gibt an, was passiert, wenn der Inhalt die Box eines Elements überläuft.
Gemeinsame Attributwerte:
sichtbarer Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert.
versteckt Der Inhalt wird gekürzt und der verbleibende Inhalt wird unsichtbar sein.
scrollen Der Inhalt wird gekürzt, aber der Browser zeigt Bildlaufleisten an, um den Rest des Inhalts anzuzeigen.
auto Wenn Inhalte zugeschnitten werden, zeigt der Browser Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.
inherit gibt an, dass der Wert des Überlaufattributs vom übergeordneten Element geerbt werden soll.
Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<h2>overflow: scroll:</h2>
<div class="ex1">php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div>
<h2>overflow: hidden:</h2>
<div class="ex2">php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div>
<h2>overflow: auto:</h2>
<div class="ex3">php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div><h2>overflow: visible (默认):</h2> <div class="ex4">php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div> </body> </html>
Sie können den oben ausgeführten Code speichern, um ihn lokal auszuführen und die Wirkung zu sehen.
Verwandte Videofreigabe: HTML-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo realisieren Sie das automatische Ausblenden von Inhalten außerhalb von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!