Auf unserer Webseite überschreitet der Textinhalt den DIV oder wird nur zur Hälfte angezeigt. Wie können wir das Problem lösen? Heute zeige ich Ihnen, wie Sie mit der unvollständigen Anzeige der letzten Textzeile umgehen.
Wie kann das Problem gelöst werden, dass die Hälfte der letzten Textzeile im DIV-Feld im Div-CSS-Layout nicht vollständig angezeigt wird? Oder die letzte Zeile des Textinhalts überschreitet den DIV-Rahmen und wie Sie das CSS-Layout zum Anzeigen und Ausblenden der letzten Zeile des Inhalts steuern und auswählen.
Die letzte Textzeile überschreitet den DIV-Rand
Im Layout kommt es häufig vor, dass die letzte Textzeile oder mehrere Textzeilen den DIV-Rand überschreiten.
1. Der vollständige Quellcode von HTML lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示不全或超出</title>
<style>
.div{ border:1px solid #000; width:200px; height:50px;line-height:20px}
</style>
</head>
<body>
<div class="div">
最后一排文字显示不完<br />
最后一排文字显示一半测试<br />
DIVCSS实例测试
</div>
</body>
</html>Die letzte Textzeile im CSS-Layout wird hinter dem DIV-Rahmen angezeigt
Die letzte Zeile Der Text wird über den DIV-Rahmen hinaus angezeigt
Grund
Der obige Textschriftinhalt wird über den DIV-Rahmen hinaus angezeigt. Es handelt sich normalerweise um einen Höheneinstellungsfehler. Die Höhe dieses Felds beträgt 50 Pixel Die Zeilenhöhe beträgt 20 Pixel. Dann nehmen drei Textzeilen eine Höhe von 60 Pixel ein, die natürliche Höhe beträgt jedoch 10 Pixel. Dieses Phänomen des Inhaltsüberlaufs tritt in Browsern höherer Versionen auf.
4. Lösungen
Es gibt vier Lösungen, um das Problem der Anzeige in der letzten Zeile zu lösen:
Die erste besteht darin, die Höhe zu berechnen und den Inhalt einzugeben drei Zeilen und die Zeilenhöhe ist auf 20 Pixel eingestellt, dann wird die Höhe auf 3 mal 20 = 60 Pixel eingestellt (mindestens gleich oder größer als 60 Pixel).
Zweitens entfernen Sie den Höhenstil. Wenn Sie nicht sicher sind, wie viel Inhalt sich im DIV-Feld befindet, besteht die einfachste und gebräuchlichste Methode darin, die Höheneinstellung des DIV zu löschen, sodass der DIV mit ansteigt der Inhalt
Die dritte Methode besteht darin, die Höhe der Zeilenhöhe zu ändern. Wenn die Höhe in Ihrem CSS-Layout festgelegt ist und der Anzeigeinhalt ebenfalls festgelegt ist und Sie ihn vollständig anzeigen möchten, können Sie nur die ändern Wert der CSS-Zeilenhöhe. In diesem Fall 50 geteilt durch 3 = 16,6. Wenn Sie die Zeilenhöhe auf Ganzzahl16 Pixel setzen, kann das Problem gelöst werden, dass der Inhalt auf eine feste Höhe überläuft.
Die vierte Methode besteht darin, den Inhalt zu reduzieren. Hier müssen Sie nur eine Zeile entfernen, sodass nur zwei Inhaltszeilen angezeigt werden.
Die Schriftart der letzten Textzeile wird zur Hälfte angezeigt
In vielen Fällen kommt es zusätzlich zu den oben genannten Problemen im Layout dazu, dass der Inhalt über das DIV hinaus nicht überläuft, sondern ausgeblendet und nicht angezeigt wird . Wie kann man es lösen?
1. HTML+CSS-Beispielcode
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示不全或超出</title>
<style>
.div{border:1px solid #000;width:200px;overflow:hidden;height:50px;line-height:20px}
</style>
</head>
<body>
<div class="div">
最后一排文字显示不完<br />
最后一排文字显示一半测试<br />
DIVCSS实例测试
</div>
</body>
</html>Analyse der Gründe für die unvollständige CSS-Layouttextanzeige
Der obige Fall ist der gleiche wie beim ersten Überlauf-DIV-Feld Code, außer dass es weitere overflow:hidden-Stile hinzugefügt hat. Bei diesem „overflow:hidden“-Stil geht der Inhalt über das ausgeblendete DIV hinaus, sodass die letzte Textzeile unvollständig oder nur zur Hälfte angezeigt erscheint.
Lösung
Die Lösung kann gelöst werden, indem auf das vorherige CSS-Kompatibilitätsproblem „Die letzte Textzeile überschreitet den DIV-Grenze“ verwiesen wird.
4-1: Reduzieren Sie die Anzahl der Textzeilen (reduzieren Sie hier einfach eine Zeile)
4-2: Stellen Sie die Höhe ein, berechnen Sie die Höhe gut
4- 3: Stellen Sie die Höhe nicht ein
4-4: Wenn die Höhe fest ist, berechnen und ändern Sie den Wert der Zeilenhöhe
Für spezifische Methoden beziehen Sie sich bitte auf Problemfall 1 detaillierte Lösungen.
Dies sind die Lösungen für das Problem, dass der Textinhalt den DIV überschreitet oder die Hälfte der Anzeige unvollständig ist. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
So konvertieren Sie die CSS-Kodierung
So erstellen Sie eine Schmetterlingsfluganimation mit CSS3
So verwenden Sie die Leinwand, um einen Partikelfontänen-Animationseffekt zu erstellen
Das obige ist der detaillierte Inhalt vonSo gehen Sie mit der unvollständigen Anzeige der letzten Textzeile in HTML um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
