info@a-coding-project.de

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>

Weiterlesen: ⯈ Listen

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant