HTML: Zeilenumbrüche, horizontale Linie & Text ausrichten
Manchmal reicht es nicht Elemente einfach nur auf dem Bildschirm darzustellen, dann soll eine Ausrichtung erfolgen. Die einzelnen Formen der Ausrichtung werden Ihnen nun in diesem Kapitel näher erläutert.
Zeilenumbruch
Um einen Zeilenumbruch (Zeilenwechsel) einzufügen können Sie das
br-Element benutzen. Der Text (bzw. die Elemente) werden dann
bei der Darstellung direkt auf die nächste (Text-)Zeile umgebrochen.
Beispiel:
<p> Zeile 1 <br> Zeile 2 </p>
Hinweis:
Das br-Element hat keinen beenden Tag und kann außer bei
Text auch anderswo angewandt werden. Beispiel:
<img><br><img>
Bereich ohne Umbruch
Bei Bereichen ohne Umbruch, d.h. Bereichen, bei denen die Inhalte unbedingt auf einer gemeinsamen Zeile stehen sollen/müssen, können Sie über die CSS-Eigenschaft white-space den automatischen Zeilenumbruch verhindern. Beispiel:
<p style="white-space: nowrap "> normaler Text Bereich ohne Umbrüche </p>
Umbruchbereiche: Soll Umbruch
Falls bei Bereichen ohne Umbruch doch die Möglichkeit bestehen soll,
das in einem Bereich ein möglicher Umbruch sein kann, so können
sie diesen Bereich mit dem &wbr;-Element festlegen.
Das kann zum Beispiel mobil bei recht langen Wörtern sinnvoll sein.
Beispiel:
<p>sehrlangeswort&wbr;evtlumbruch</p>
Ebenen
Um mehrere Elemente zu einer gemeinsamen Gruppe/Ebene zusammen zu fassen,
können Sie das div-Element benutzen. Es umschließt
die gewünschten Elemente und kann so Festlegungen (z.B. Ausrichtung
etc.) für alle eingeschlossenen Elemente vereinheitlichen. Beispiel:
<div align="right"> normaler Text <br> <img> normaler Text </div>
Zentrierung
Um eine Zentrierung von mehreren Elementen zu erhalten, können Sie die CSS-Eigenschaft text-align verwenden.Neben einer Zentrierung ist es so auch möglich, den Text rechtsbündig auszurichten. Beispiel:
<p style="text-align:center"> Text<br> Text </p>
Horizontale Linie
Eine horizontale Linie wird durch das hr-Element
eingefügt. Dieses gilt als selbständiger Absatz und braucht keinen
beendenden Tag. Beispiel:
<p> Text </p> <hr> <p> Text </p>
Beispiel:
<p> oben <hr> unten </p>
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Listen
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project