Wenn Sie Webseiten erstellen und in HTML programmieren, haben Sie möglicherweise bemerkt, dass unabhängig davon, wie viele Leerzeichen Sie zwischen Wörtern oder Textelementen platzieren Sie werden beim Rendern der Seite auf ein einzelnes Leerzeichen reduziert.
Wenn Sie in den meisten Textverarbeitungssoftware Text oder Sätze schreiben, können Sie die Leertaste mehrmals drücken und mehrere Leerzeichen hinzufügen, wo immer Sie möchten., Abhängig vom verwendeten HTML-Editor können Sie dies möglicherweise auch im Editor tun, aber sobald die Seite in einem Webbrowser gerendert wird, verschwinden diese Leerzeichen.
Dies kann für neue Benutzer und unerfahrene Programmierer sehr verwirrend sein. Sie sehen sich den Quellcode an und sehen die mehreren Leerzeichen, aber irgendwie hat die Webseite sie nicht. Dies liegt daran, wie HTML-Spezifikation funktioniert und wie die Rendering-Engines programmiert sind. Aber alles ist nicht verloren….,
Leerzeichen zwischen Wörtern oder Zeichen in Textelementen
Um mehrere Leerzeichen einzufügen, müssen Sie das erweiterte HTML-Zeichen kennen: oder das nicht brechende Leerzeichen. Sie können diese verwenden, um fast überall einen zusätzlichen Platz hinzuzufügen. Schauen wir uns ein Beispiel an:
<p>this is a short sentence with extra spaces between text</p>
Das obige Beispiel zeigt oder rendert im Webbrowser als:
Dies ist ein kurzer Satz mit zusätzlichen Leerzeichen zwischen Text
Sie können dies zwischen beliebigen Elementen und mit in jedem HTML-Tag verwenden., Hier haben wir das <p> oder das Paragraph-Tag verwendet, aber Sie können es auch innerhalb von div oder span verwenden. Dies ist nützlich, um horizontale Leerzeichen zwischen Wörtern und Zeichen hinzuzufügen. Wenn Sie darüber nachdenken, vertikalen Abstand zwischen Wörtern oder Sätzen hinzuzufügen, können Linienhöhe und Linienhöhe auf völlig unterschiedliche Weise angepasst werden.,
Verwenden von CSS zum Hinzufügen von Wortabständen
Die obige Methode zur Verwendung eines nicht brechenden Leerzeichens ist wahrscheinlich der flexibelste Ansatz, da Sie Leerzeichen zufällig dort einfügen können, wo Sie sie möchten. Das ist alles gut und gut, wenn Sie hier und da nur einige Leerzeichen hinzufügen. Wenn Sie jedoch konsistent zusätzliche Leerzeichen zwischen jedem Wort im gesamten Textelement hinzufügen möchten, kann dies ziemlich umständlich werden.
Um dies mit dieser Methode zu tun, müssen Sie das nicht brechende Leerzeichen zwischen jedem einzelnen Wort im Text hinzufügen., Die andere Option besteht darin, die CSS-Eigenschaft für den Wortabstand zu verwenden. Die CSS-Eigenschaft heißt word-spacing und kann mit jedem HTML-Tag verwendet werden, das Text anzeigt.
<p style=”word-spacing: 40px”>this is a sample sentence with extra wide word spacing between text</p>
Der obige Code wird wie folgt gerendert:
Dies ist ein Beispielsatz mit einem extra breiten Wortabstand
Leerzeichen zwischen Absätzen oder anderen Textelementen auf der Seite
Obwohl dies ein schlechter Weg ist, dies zu erreichen, können Sie den nicht unterbrechenden Leerzeichen ( ) hinzufügen Leerzeichen zwischen Absätzen als auch. Der bessere Weg, dies zu tun, wäre die Verwendung eines kaskadierenden Stylesheets oder des Style-Tags.,
Die erste Methode, um den Abstand zwischen zwei Absätzen hinzuzufügen, besteht darin, einen neuen leeren Absatz zwischen ihnen hinzuzufügen. Sie können dies erreichen, indem Sie die nicht brechenden Leerzeichen mit in den p-Tags verwenden.
<p>first paragraph here</p>
<p> </p>
<p>second paragraph</p>
Sie können so viele dieser“ zusätzlichen “ Absätze hinzufügen, wie Sie Platz zwischen den Absätzen benötigen. Eine etwas bessere Option ist die Verwendung des Zeilenumbruchs-Tags in HTML, bei dem es sich um das<br> – Tag handelt.,
<p>first para</p>
<br/><br/>
<p>second para</p>
Sie können so viele br-Tags hinzufügen, wie Sie vertikalen Raum zwischen Text oder visuellen Blöcken in HTML hinzufügen möchten. Und der beste Weg ist, das Style-Tag oder CSS zu verwenden und den Rand oder die Auffüllung des Elements anzupassen. Wie das geht, geht wahrscheinlich über den Rahmen dieses Beitrags hinaus…