So verbergen Sie den überschüssigen Teil des HTML-Textes-HTML-Tutorial-php.cn

So verbergen Sie den überschüssigen Teil des HTML-Textes

王林

Freigeben： 2021-06-21 10:15:03

Original

5660 Leute haben es durchsucht

Die Möglichkeit, den überschüssigen Teil des HTML-Textes auszublenden, besteht darin, das Überlaufattribut zum Textfeld hinzuzufügen und den Attributwert auf ausgeblendet zu setzen, z. B. [overflow:hidden;]. Ausgeblendet bedeutet, dass der Inhalt gekürzt wird und der Rest des Inhalts nicht sichtbar ist.

So verbergen Sie den überschüssigen Teil des HTML-Textes

Die Betriebsumgebung dieses Artikels: Windows 10-System, HTML 5, Thinkpad T480-Computer.

Wenn wir Text in das Textfeld eingeben, stellen wir manchmal fest, dass der Teil hinter dem Textfeld fehlt oder zu Auslassungspunkten wird, d. h. der Teil hinter dem Textfeld ist ausgeblendet. Was also tun, wenn wir diesen Effekt auch erreichen wollen? Eigentlich ist es ganz einfach: Verwenden Sie einfach das Überlaufattribut. Schauen wir es uns gemeinsam an.

Das Überlaufattribut gibt an, was passiert, wenn der Inhalt die Box eines Elements überläuft.

Attributwert:

sichtbar 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.

Das Codebeispiel lautet wie folgt:

<!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>

Nach dem Login kopieren

Wenn Sie interessiert sind, können Sie den obigen Code speichern, um ihn lokal auszuführen und den spezifischen Effekt zu sehen.

Verwandte Empfehlungen: HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verbergen Sie den überschüssigen Teil des HTML-Textes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!