Die Textausrichtung ist eine häufige Aufgabe im Webdesign. Sie trägt zu einem übersichtlichen und professionellen Layout bei, indem sie den Text am linken und rechten Rand gleichmäßig ausrichtet. In HTML5 erfolgt die Textausrichtung üblicherweise mit CSS (Cascading Style Sheets) und nicht direkt in den HTML-Tags.

Warum Text im Blocksatz ausrichten?

Durch Blocksatz wird ein einheitlicher Textblock erstellt, der am linken und rechten Rand eines Containers ausgerichtet ist, ähnlich wie bei Zeitungs- oder Buchtexten. Diese Methode wird häufig verwendet, um die Ästhetik von Absätzen zu verbessern und den Text übersichtlicher und strukturierter erscheinen zu lassen.

So richten Sie Text mit CSS in HTML5 aus

Sie können Text in HTML5 mithilfe der Textausrichtung Eigenschaft in CSS. Die Textausrichtung Die Eigenschaft steuert die horizontale Ausrichtung von Text innerhalb eines Containers. Um den Text auszurichten, verwenden Sie einfach den Wert rechtfertigen.

So können Sie es machen:

Beispiel:

    
    
    
    


    
So richten Sie Text in HTML5 aus
    

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Keine Erleichterung. Integer convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui. Nunc sit amet magna nisi. Integer-Autor, auch bekannt als Vulputat. Suspendisse vitae urna eget augue volutpat iaculis non sit amet mi. 
    
    

        Aenean tincidunt, arcu nec tincidunt aliquet, nisl risus maximus nunc, sed bibendum risus velit a augue. Curabitur suscipit, lectus id efficitur mollis, metus lectus tincidunt ligula, id luctus magna risus et sapien. Keine Erleichterung. Proin elementum sit amet purus a fermentum. Ut et velit a mi volutpat auctor.
    

Erläuterung:

• HTML-Struktur:
  • Der
    Tag wird für die Überschrift verwendet, und zwei
    Tags werden für Textabsätze verwendet.
• CSS:
  • Der Textausrichtung: Blocksatz; Stil wird auf alle angewendet
    Elemente. Dadurch wird sichergestellt, dass der Text innerhalb dieser Absatz-Tags ausgerichtet ist, d. h., er wird so gestreckt, dass er sowohl am linken als auch am rechten Rand ausgerichtet ist.

Alternative: Textausrichtung für bestimmte Elemente

Wenn Sie die Ausrichtung nicht auf alle Absätze, sondern nur auf bestimmte anwenden möchten, können Sie eine Klasse oder ID verwenden, um bestimmte Elemente anzusprechen.

Beispiel mit einer Klasse:

    
    
    
    


    
So richten Sie Text in HTML5 aus
    

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Keine Erleichterung. Integer convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui.
    
    

        Dieser Absatz wird nicht im Blocksatz ausgerichtet, da er nicht über die Klasse „justify-text“ verfügt.
    

In diesem Beispiel wird nur der Absatz mit der Klasse Text ausrichten ist im Blocksatz und der zweite Absatz bleibt linksbündig.

Dinge, die Sie beachten sollten:

1. Lesbarkeit: Justified text can sometimes create uneven spacing between words, especially if the line length is short. This can affect readability. It’s important to test the justification on different devices and screen sizes to ensure a clean, readable appearance.
2. Silbentrennung: Blocksatz kann auch zu ungünstigen Wortumbrüchen führen. Um die Textdarstellung zu verbessern, können Sie die Silbentrennung in CSS aktivieren, indem Sie die Bindestriche Eigenschaft (obwohl nicht alle Browser diese Funktion unterstützen).

   p { text-align: justify; hyphens: auto; /* Ermöglicht automatische Silbentrennung */}
   

3. Alternative Ausrichtungen: Wenn Sie feststellen, dass die Blocksatzausrichtung nicht in allen Fällen gut aussieht, können Sie mit anderen Textausrichtungen experimentieren, wie zum Beispiel links, Rechts, oder Center, mithilfe der Textausrichtung Eigentum.

Abschluss

Die Textausrichtung in HTML5 lässt sich ganz einfach mit CSS und dem Textausrichtung: Blocksatz; Eigenschaft. Es hilft beim Erstellen sauberer, professionell aussehender Textblöcke, wie sie häufig in Büchern, Zeitungen und Websites zu finden sind. Ob Sie Text auf der gesamten Seite oder nur für bestimmte Elemente ausrichten möchten – CSS bietet eine einfache Möglichkeit, diese Funktion zu implementieren und an Ihre Bedürfnisse anzupassen.

Foto von Lukas