Wenn Sie mit Text arbeiten, müssen Sie häufig jede Zeile mit einer neuen Zeile ausgeben, insbesondere wenn der Text Absätze, Verse oder andere Elemente enthält, die eine Trennung voneinander erfordern. Für diese Formatierung von Text in HTML gibt es spezielle CSS-Tags und -Eigenschaften.
Ein richtiger und flexiblerer Weg ist die Verwendung der CSS-Eigenschaft white-space: pre-line; . Diese Eigenschaft gibt Leerzeichen und Zeilenumbrüche an, wie sie im HTML-Quellcode angegeben sind. Auf diese Weise werden alle Leerzeichen und Zeilenumbrüche im angezeigten Text gespeichert. Darüber hinaus ermöglicht diese Eigenschaft die Verwendung anderer CSS-Funktionen, z. B. die Verwendung von Einrückungen, Schriftarten, Farben usw.
Первая строка текста
Вторая строка текста
-
,
und
um eine Aufzählungsliste oder eine nummerierte Liste von Zeilen zu erstellen. Zum Beispiel:
- Erste Textzeile
- Zweite Textzeile
-
und
erstellen Sie eine Liste, und jede Textzeile wird durch ein Tag dargestellt
. Das Ergebnis wird je nach Tag wie eine Aufzählungsliste oder eine nummerierte Liste aussehen.
Warum müssen Zeilen aus einer neuen Zeile ausgegeben werden?
Das Hervorheben von Zeilen aus einer neuen Zeile ist besonders nützlich, wenn der Text Listen, Enumerationen, Anweisungen, Algorithmen oder andere Elemente enthält, die eine Trennung in einzelne Elemente oder Schritte erfordern. Dies hilft den Lesern, Informationen schnell und einfach zu navigieren und Verbindungen zwischen verschiedenen Elementen zu erfassen.
Darüber hinaus verbessert das Markieren von Zeilen aus einer neuen Zeile die Lesbarkeit von Text in mobilen Geräten, responsiven Websites und anderen Situationen, in denen der verfügbare Platz für die Anzeige von Text begrenzt ist. Dadurch wird verhindert, dass lange Zeilen umständlich umbrochen werden, der Text ist kompakter und lesbarer, auch auf Geräten mit kleinen Bildschirmen.
Unabhängig vom Verwendungskontext ist das Markieren von Zeilen aus einer neuen Zeile eine gute Praxis, um den Text für die Benutzer verständlicher und zugänglicher zu machen, was eine bessere Lesbarkeit und eine bessere Lesbarkeit der Informationen ermöglicht.
Es gibt mehrere Methoden, mit denen Sie jede Zeile mit einer neuen Zeile ausgeben können. Betrachten wir einige von ihnen:
1. Verwenden eines Tags
Der einfachste Weg ist die Verwendung eines Tags
. Fügen Sie einfach dieses Tag am Ende jeder Zeile hinzu:
Строка 1
Строка 2
Строка 3
2. Verwenden eines Tags
Sie können auch das Tag verwenden
um die Zeilen zu trennen. Wickeln Sie jede Zeile in ein separates Tag ein
:
Строка 1
Строка 2
Строка 3
3. Verwenden von CSS
.new-line Строка 1Строка 2Строка 3
Methode 1: Verwenden des Tags
Beispiel für die Verwendung eines Tags
:
Verwenden eines Tags
sie können sie mit anderen Tags kombinieren, um eine komplexere Webseitenstruktur zu erstellen.
Kennung
es ist selbstschließend und erfordert daher kein schließendes Tag.
Methode 2: Verwenden von Tags
und
Wenn Sie jede Zeile mit einer neuen Zeile ausgeben müssen, können Sie Tags verwenden
und
. Kennunggibt einen neuen Absatz an, und alles, was danach geschrieben wird, wird als neue Zeile angezeigt.
Anwenden von Tags
und
in dieser Situation kann es nützlich sein, wenn Sie mehrere Textzeilen haben und jede Zeile mit einer neuen Zeile beginnen soll. Setzen Sie einfach jede Zeile in separate Tagsund
:Wenn Sie einen solchen HTML-Code auf die Seite laden, wird jede Zeile mit einer neuen Zeile angezeigt:
- Erste Zeile
- Zweite Zeile
- Dritte Zeile
Methode 3: Verwenden der CSS-Eigenschaft white-space: pre;
Wenn Sie mehrere Textzeilen haben und jede Zeile mit einer neuen Zeile ausgeben möchten, können Sie die CSS-Eigenschaft white-space: pre; verwenden.
Um diese Eigenschaft anzuwenden, müssen Sie dem gewünschten Element eine CSS-Regel hinzufügen:
selector
Dabei ist selector der Selektor des Elements, auf das Sie diese Eigenschaft anwenden möchten.
-
. Sie können die Eigenschaft white-space: pre; auf dieses Element anwenden:
Das Ergebnis wird wie folgt aussehen:
- Erste Zeile
- Zweite Zeile
- Dritte Zeile
Wenn Sie jede Zeile mit einer neuen Zeile ausgeben möchten, können Sie das Tag verwenden. Dieses Tag dient zum Anzeigen von vorformatiertem Text, in dem alle Leerzeichen und Zeilenumbrüche eingehalten werden.
Der Vorteil der Verwendung eines Tags besteht darin, dass es automatisch Zeilenumbrüche hinzufügt und den Text unverändert anzeigt. Sie müssen keine separaten Tags für jede Zeile verwenden oder dies mit CSS-Stilen tun.
Beispiel für die Verwendung eines Tags :
Строка 1Строка 2Строка 3
Als Ergebnis erhalten wir:
Строка 1Строка 2Строка 3
Methoden vergleichen und am effektivsten auswählen
Wenn Sie jede Zeile mit einer neuen Zeile ausgeben möchten, wenn es mehrere Zeilen gibt, gibt es mehrere Möglichkeiten, diese Aufgabe zu lösen. Betrachten Sie die grundlegenden Methoden und wählen Sie die effektivste aus.
1. Verwenden eines TagsEine der einfachsten und gebräuchlichsten Methoden ist die Verwendung eines Tags
. Setzen Sie einfach jede Zeile in ein separates Tag
:
Первая строка
Вторая строка
Третья строка
Diese Methode ist am einfachsten und verständlichsten, ist aber möglicherweise nicht die effektivste, besonders wenn Sie viele Zeilen haben.
-
,
so erstellen Sie eine Aufzählungsliste:
- Erste Zeile
- Zweite Zeile
- Dritte Zeile
Dieser Ansatz ist auch einfach und lesbar, kann aber für das Styling oder das Ändern in Zukunft unangenehm sein.
-
,
so erstellen Sie eine nummerierte Liste:
- Erste Zeile
- Zweite Zeile
- Dritte Zeile
Mit diesem Ansatz können Sie die Reihenfolge der Zeilen angeben und sie automatisch nummerieren. Es kann jedoch unangenehm sein, wenn Sie keine nummerierten Zeilen benötigen.
-
,
oder
,
entsprechend. Letztendlich hängt die Wahl vom Kontext und der Benutzerfreundlichkeit in Ihrem Projekt ab.