{"id":398,"date":"2025-04-13T21:18:25","date_gmt":"2025-04-13T20:18:25","guid":{"rendered":"http:\/\/3.238.148.255\/?p=398"},"modified":"2025-04-18T02:59:19","modified_gmt":"2025-04-18T01:59:19","slug":"wie-man-text-in-html5-justiert","status":"publish","type":"post","link":"https:\/\/blog.juandesouza.com\/de\/tech\/wie-man-text-in-html5-justiert\/","title":{"rendered":"So richten Sie Text in HTML5 aus"},"content":{"rendered":"<p>Die Textausrichtung ist eine h\u00e4ufige Aufgabe im Webdesign. Sie tr\u00e4gt zu einem \u00fcbersichtlichen und professionellen Layout bei, indem sie den Text am linken und rechten Rand gleichm\u00e4\u00dfig ausrichtet. In HTML5 erfolgt die Textausrichtung \u00fcblicherweise mit CSS (Cascading Style Sheets) und nicht direkt in den HTML-Tags.<\/p>\n<h3>Warum Text im Blocksatz ausrichten?<\/h3>\n<p>Durch Blocksatz wird ein einheitlicher Textblock erstellt, der am linken und rechten Rand eines Containers ausgerichtet ist, \u00e4hnlich wie bei Zeitungs- oder Buchtexten. Diese Methode wird h\u00e4ufig verwendet, um die \u00c4sthetik von Abs\u00e4tzen zu verbessern und den Text \u00fcbersichtlicher und strukturierter erscheinen zu lassen.<\/p><div id=\"juand-2623215130\" class=\"juand-content juand-entity-placement\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8944986240478060\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block; text-align:center;\"\r\n data-ad-layout=\"in-article\"\r\n data-ad-format=\"fluid\"\r\n data-ad-client=\"ca-pub-8944986240478060\"\r\n data-ad-slot=\"9601515663\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<br\/><\/div>\n<h3>So richten Sie Text mit CSS in HTML5 aus<\/h3>\n<p>Sie k\u00f6nnen Text in HTML5 mithilfe der <code>Textausrichtung<\/code> Eigenschaft in CSS. Die <code>Textausrichtung<\/code> Die Eigenschaft steuert die horizontale Ausrichtung von Text innerhalb eines Containers. Um den Text auszurichten, verwenden Sie einfach den Wert <code>rechtfertigen<\/code>.<\/p>\n<p>So k\u00f6nnen Sie es machen:<\/p>\n<h3>Beispiel:<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\r\n    &lt;title&gt;Beispiel f&uuml;r Textausrichtung&lt;\/title&gt;\r\n    &lt;style&gt;\r\n        \/* CSS to justify the text *\/\r\n        p {\r\n            text-align: justify;\r\n        }\r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;h1&gt;So richten Sie Text in HTML5 aus&lt;\/h1&gt;\r\n    &lt;p&gt;\r\n        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. \r\n    &lt;\/p&gt;\r\n    &lt;p&gt;\r\n        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.\r\n    &lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<h3>Erl\u00e4uterung:<\/h3>\n<ul>\n<li><strong>HTML-Struktur<\/strong>:\n<ul>\n<li>Der <code>&lt;h1&gt;<\/code> Tag wird f\u00fcr die \u00dcberschrift verwendet, und zwei <code>&lt;p&gt;<\/code> Tags werden f\u00fcr Textabs\u00e4tze verwendet.<\/li>\n<\/ul>\n<\/li>\n<li><strong>CSS<\/strong>:\n<ul>\n<li>Der <code>Textausrichtung: Blocksatz;<\/code> Stil wird auf alle angewendet <code>&lt;p&gt;<\/code> 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.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Alternative: Textausrichtung f\u00fcr bestimmte Elemente<\/h3>\n<p>Wenn Sie die Ausrichtung nicht auf alle Abs\u00e4tze, sondern nur auf bestimmte anwenden m\u00f6chten, k\u00f6nnen Sie eine Klasse oder ID verwenden, um bestimmte Elemente anzusprechen.<\/p>\n<h4>Beispiel mit einer Klasse:<\/h4>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\r\n    &lt;title&gt;Beispiel f&uuml;r Textausrichtung&lt;\/title&gt;\r\n    &lt;style&gt;\r\n        \/* CSS to justify only paragraphs with the class &#039;justify-text&#039; *\/\r\n        .justify-text {\r\n            text-align: justify;\r\n        }\r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;h1&gt;So richten Sie Text in HTML5 aus&lt;\/h1&gt;\r\n    &lt;p class=&quot;justify-text&quot;&gt;\r\n        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.\r\n    &lt;\/p&gt;\r\n    &lt;p&gt;\r\n        Dieser Absatz wird nicht im Blocksatz ausgerichtet, da er nicht &uuml;ber die Klasse &bdquo;justify-text&ldquo; verf&uuml;gt.\r\n    &lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<p>In diesem Beispiel wird nur der Absatz mit der Klasse <code>Text ausrichten<\/code> ist im Blocksatz und der zweite Absatz bleibt linksb\u00fcndig.<\/p><div id=\"juand-1672438296\" class=\"juand-content_2 juand-entity-placement\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8944986240478060\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block; text-align:center;\"\r\n data-ad-layout=\"in-article\"\r\n data-ad-format=\"fluid\"\r\n data-ad-client=\"ca-pub-8944986240478060\"\r\n data-ad-slot=\"9601515663\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<br\/><\/div>\n<h3>Dinge, die Sie beachten sollten:<\/h3>\n<ol>\n<li><strong>Lesbarkeit<\/strong>Blocksatz kann manchmal zu ungleichm\u00e4\u00dfigen Abst\u00e4nden zwischen W\u00f6rtern f\u00fchren, insbesondere bei kurzen Zeilen. Dies kann die Lesbarkeit beeintr\u00e4chtigen. Es ist wichtig, den Blocksatz auf verschiedenen Ger\u00e4ten und Bildschirmgr\u00f6\u00dfen zu testen, um eine saubere, lesbare Darstellung zu gew\u00e4hrleisten.<\/li>\n<li><strong>Silbentrennung<\/strong>: Blocksatz kann auch zu ung\u00fcnstigen Wortumbr\u00fcchen f\u00fchren. Um die Textdarstellung zu verbessern, k\u00f6nnen Sie die Silbentrennung in CSS aktivieren, indem Sie die <code>Bindestriche<\/code> Eigenschaft (obwohl nicht alle Browser diese Funktion unterst\u00fctzen).\n<pre><code class=\"language-css\">p {\r\n    text-align: justify;\r\n    hyphens: auto; \/* Allows automatic hyphenation *\/\r\n}\r\n<\/code><\/pre>\n<\/li>\n<li><strong>Alternative Ausrichtungen<\/strong>: Wenn Sie feststellen, dass die Blocksatzausrichtung nicht in allen F\u00e4llen gut aussieht, k\u00f6nnen Sie mit anderen Textausrichtungen experimentieren, wie zum Beispiel <code>links<\/code>, <code>Rechts<\/code>, oder <code>Center<\/code>, mithilfe der <code>Textausrichtung<\/code> Eigentum.<\/li>\n<\/ol>\n<h3>Abschluss<\/h3>\n<p>Die Textausrichtung in HTML5 l\u00e4sst sich ganz einfach mit CSS und dem <code>Textausrichtung: Blocksatz;<\/code> Eigenschaft. Es hilft beim Erstellen sauberer, professionell aussehender Textbl\u00f6cke, wie sie h\u00e4ufig in B\u00fcchern, Zeitungen und Websites zu finden sind. Ob Sie Text auf der gesamten Seite oder nur f\u00fcr bestimmte Elemente ausrichten m\u00f6chten \u2013 CSS bietet eine einfache M\u00f6glichkeit, diese Funktion zu implementieren und an Ihre Bed\u00fcrfnisse anzupassen.<\/p>\n<p>Foto von <a href=\"https:\/\/www.pexels.com\/photo\/person-encoding-in-laptop-574071\/\" target=\"_blank\" rel=\"noopener\">Lukas<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Die Textausrichtung ist eine h\u00e4ufige Aufgabe im Webdesign. Sie tr\u00e4gt zu einem \u00fcbersichtlichen und professionellen Layout bei, indem sie den Text am linken und rechten Rand gleichm\u00e4\u00dfig ausrichtet. In HTML5 erfolgt die Textausrichtung \u00fcblicherweise mit CSS (Cascading Style Sheets) und nicht direkt in den HTML-Tags.<\/p>","protected":false},"author":1,"featured_media":97949,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1302,1289],"tags":[],"class_list":["post-398","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devs","category-tech"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blog.juandesouza.com\/wp-content\/uploads\/2017\/09\/pexels-goumbik-574071-scaled.jpg?fit=2560%2C1695&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p8STS8-6q","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/posts\/398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/comments?post=398"}],"version-history":[{"count":2,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/posts\/398\/revisions"}],"predecessor-version":[{"id":97950,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/posts\/398\/revisions\/97950"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/media\/97949"}],"wp:attachment":[{"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/media?parent=398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/categories?post=398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/tags?post=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}