Heim >Web-Frontend >CSS-Tutorial >Wie kann ich verhindern, dass lange Wörter mein Div zerstören?
Wie kann ich verhindern, dass lange Wörter mein Div zerstören?
- WBOYnach vorne
- 2023-08-30 16:29:06807Durchsuche
Manchmal müssen Entwickler lange Wörter auf Webseiten anzeigen. Zum Beispiel Anzeige-URLs, lange Dateinamen usw. Manchmal ist die Wortlänge größer als die Länge des übergeordneten Containers und das Wort zerstört den Container.
Zum Beispiel haben wir eine Karte erstellt, um Dateidetails anzuzeigen, und der Dateiname war sehr lang, wodurch die Karte beschädigt werden könnte und es immer schlimmer aussieht. Daher müssen Entwickler verhindern, dass lange Wörter Div-Elemente unterbrechen, indem sie sie umschließen.
Bevor wir mit der Lösung beginnen, lassen Sie uns das Problem anhand eines Beispiels verstehen.
Beispiel 1 (Div zur Zerlegung langer Wörter)
Im folgenden Beispiel haben wir ein div-Element erstellt und ein „p“-Element innerhalb des div-Elements hinzugefügt. Zusätzlich haben wir dem Text des „p“-Elements lange Wörter hinzugefügt.
In CSS legen wir eine feste Größe des div-Elements fest. In der Ausgabe kann der Benutzer beobachten, wann das Wort das div-Element unterbricht und aus ihm überläuft.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2> Long words breaking the div in HTML5 </h2>
<div class = "container">
<p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv. </p>
</div>
</body>
</html>
Verwenden Sie die CSS-Eigenschaft Word-break, um Wörter zu unterbrechen
Bei dieser Methode verwenden wir die CSS-Eigenschaft „word-break“, um zu verhindern, dass Wörter das div-Element unterbrechen. Mit dem Attribut „word-break“ können wir entscheiden, wie Wörter umgebrochen werden sollen, wenn sie die Breite des Containers überschreiten.
Benötigen Sie unterschiedliche Werte, um das Wort zu brechen. Der „normale“ Wert unterbricht Wörter nur an bestimmten Haltepunkten (z. B. Leerzeichen, Bindestriche usw.). Der Wert „break-all“ unterbricht das Wort bei jedem Zeichen, das überläuft, und der Wert „keep-all“ unterbricht das Wort nie. Wort.
Hier verwenden wir den „Break-All“-Wert, um das Wort von jedem Zeichen zu trennen.
Grammatik
Benutzer können die CSS-Eigenschaft „word-break“ gemäß der folgenden Syntax verwenden, um zu verhindern, dass lange Wörter div-Elemente unterbrechen.
word-break: break-all;
Beispiel 2 (verhindern, dass lange Wörter Div unterbrechen)
Im folgenden Beispiel haben wir das lange Wort, das wir im ersten Beispiel hinzugefügt haben, in das Container-Div-Element eingefügt. In CSS verwenden wir die Eigenschaft „word-break“ und den Wert „break-all“, um zu verhindern, dass Wörter div-Elemente unterbrechen.
In der Ausgabe können wir beobachten, dass das Wort ab einem bestimmten Zeichen umbricht und die restlichen Zeichen des Wortes in der nächsten Zeile angezeigt werden.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.5rem;
}
.long-word {
word-break: break-all;
}
</style>
</head>
<body>
<h2> Preventing the long words breaking the div in HTML5
</h2>
<div class = "container">
<p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv.</p>
</div>
</body>
</html>
Verwenden Sie das Overflow-Wrap-Attribut
Mit dem „overflow-wrap“-Attribut können wir entscheiden, wie der Inhalt des Elements umbrochen werden soll, wenn er vom übergeordneten Element überläuft. Wir können den Wert „break-word“ des Attributs „overflow-wrap“ verwenden, um zu verhindern, dass lange Wörter das div-Element durch Umbrechen unterbrechen.
Grammatik
Benutzer können die CSS-Eigenschaft „overflow-wrap“ verwenden, um lange Wörter gemäß der folgenden Syntax umzubrechen.
overflow-wrap: break-word;
Beispiel 3
Im Beispiel unten haben wir ein sehr langes Wort als Text des „p“-Elements hinzugefügt. Danach verwenden wir das „overflow-wrap“-Attribut des übergeordneten Elements, um den übergelaufenen Inhalt in der nächsten Zeile umzubrechen, indem wir die Wörter umbrechen.
In der Ausgabe können wir sehen, dass das Wort in der Mitte unterbrochen ist und die restlichen Zeichen in der nächsten Zeile angezeigt werden.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<h3> Preventing the long words breaking the div in HTML5 using the overflow-wrap property
</h3>
<div class = "container">
<p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
</div>
</body>
</html>
Beispiel 4 (Overflow-wrap-Attribut mit JavaScript festlegen)
Manchmal müssen wir JavaScript verwenden, um zu verhindern, dass lange Wörter das Div unterbrechen. Beispielsweise erhalten wir die Produktdaten aus der Datenbank. Wenn der Produktname sehr lang ist, können wir das Attribut „overflow-wrap“ für ein bestimmtes Produkt verwenden, um den langen Produktnamen zu umbrechen.
In JavaScript können wir auf das HTML-Element zugreifen und die „overflowWrap“-Eigenschaft des Style-Objekts verwenden, um zu verhindern, dass lange Wörter das div-Element unterbrechen.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h3> Preventing the long words breaking the div in HTML5 using the <i>overflow-wrap</i> property
</h2>
<div class = "container">
<p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
</div>
<script>
let longWord = document.querySelector('.long-word');
longWord.style.overflowWrap = 'break-word';
</script>
</body>
</html>
Benutzer haben gelernt, verschiedene CSS-Eigenschaften zu verwenden, um zu verhindern, dass lange Wörter Div-Elemente unterbrechen. Bei der ersten Methode verwenden wir die CSS-Eigenschaft „word-break“, um anzugeben, wie der Browser Wörter umbrechen soll. Im zweiten Ansatz verwenden wir die CSS-Eigenschaft „overflow-wrap“, um anzugeben, wie mit einem Überlauf des Inhalts des div-Elements umgegangen werden soll.
Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass lange Wörter mein Div zerstören?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!