HTML - Wie zweite Zeile einer Überschrift einrücken?
Ich bekomme im Bild unten nach einem Umbruch die beiden Zeilen nicht linksbündig hin, weil vorne ein Nummerierungssmiley ist.
Kann mir jemand eine Lösung anbieten?
3 Antworten
Gib deinem Text
display: inline-block;
vertical-align: top;
Beispiel:
<span>1️</span>
<span style="display: inline-block; vertical-align:top;">
Die Vorteile meiner differen-<br>zierten Analyse
</span>
Das Emoji darf natürlich nicht im selben Text-Element sein. Tu's in ein extra <span>-Element oder so. Siehe Beispiel.
Hb meine Antwort editiert, schau sie dir nochmal an, so sollte es klappen.
Funktioniert nicht, weil das Smiley in der 1. Zeile und der Text in der 2. und 3. Zeile - allerdings linksbündig - steht. Aber die Nummer soll ja davor stehen nicht oben darüber.
Bei dem Code den ich dir geschrieben habe steht die Nummer davor, wie von dir gewünscht.
Schau, hier: https://jsfiddle.net/9yjzs1p6/
Vermutlich hast du irgendwas falsch abgeschrieben. Vlt. hast du "block" anstatt "inline-block" geschrieben? Oder du hast den Emoji in einem Block-Element?
Schick mal deinen HTML-Code bitte. Dann kann ich dir sagen was du falsch hast.
<p style="font-family:Arial,sans-serif;font-size:20px;background-color:#CBCBFC;padding-top:2px;margin-bottom:24px">1️⃣ Die Vor­tei­le mei­ner dif­fe­ren­zier­ten Ana­ly­se</font>
</p>
Du hast den Emoji und den Text im selben <p>-Element stehen. Da weiß HTML nicht auf magische Art und Weise, dass der Text in der nächsten Zeile hinter dem Emoji anfangen soll. Der Emoji und der Text müssen in Unterschiedlichen Elementen sein, siehe mein Beispiel.
Aber wegen dem ­ klappt das mit dem inline-block sowieso nicht. CSS erkennt das nicht als Linebreak. Aber stattdessen geht's mit display: flex; !
<div style="font-family:Arial,sans-serif;font-size:20px;background-color:#CBCBFC;padding-top:2px;margin-bottom:24px; display: flex;">
<span>1️⃣ </span><span>Die Vor­tei­le mei­ner dif­fe­ren­zier­ten Ana­ly­se</span>
</div>
Hab dir mal alles Dick markiert was zu ändern ist.
Danke für deine Antwort. Das Ergebnis ist "fast" befriedigend, aber nicht ganz. Ich habe aber zwischenzeitlich eine Lösung gefunden, die exakt die Linksbündigkeit der zweiten Zeile bringt. Ich sende dir meinen HTML-Code wie folgt:
<div style="margin-bottom:0; display:table; font-family:Arial,sans-serif;font-size:25px;background-color:#CBCBFC;padding-top:3px;padding-bottom:3px;margin-bottom:24px; width:100%;">
<div style="display: table-row">
<div style="display:table-cell;width:20px;">
1️⃣
</div>
<div style="display:table-cell; line-height:1.2;">
<strong>Die Vorteile meiner differenzierten Analyse</strong>
</div>
</div>
</div>
</p>
Hast du zu dieser meiner Frage vielleicht noch eine Idee, wie ich das hinbekomme? Danke für deine Bemühungen. Ich schaue morgen wieder ins Forum.
https://www.gutefrage.net/frage/html---wie-kriege-ich-einen-text-hinter-eine-raute#comment-311882715
Unterteile deinen Paragraph in zwei span-Elemente und ändere deren Renderingbox, sodass sie sich wie Tabellenzellen verhalten.
HTML:
<p>
<span>1️⃣</span>
<span>Die Vorteile meiner differenzierten Analyse</span>
</p>
CSS:
p {
/* your paragraph styles ... */
}
p > span { display: table-cell }
Anschließend noch zwei weitere Anmerkungen:
1) Statt der vielen Trennmarker (­) würde ich in Erwägung ziehen, Worttrennungen komplett dem Browser zu überlassen. Der Support ist dafür schon gut.
- lang-Attribut auf html-Tag setzen (lang="de")
- hyphens-Property setzen
2) Ein font-Tag (abgesehen davon, dass deinem Vorkommen auch ein Starttag fehlen würde) hat in modernen HTML-Dokumenten (die den HTML5-Standard nutzen) nichts verloren. Verwende CSS, um deine Schrift zu stylen. Wenn ich mir deinen Inline-Style so anschaue, machst du das dort ja auch bereits.
Hallo,
Ich nehme an, dass du zum erstellen dieser Auflistung einen <li> Tag benutzt hast.
Ich gehe von einem Code in dieser Richtung aus:
<li>
<span>
Die Vorteile meiner differen- </br> zierten Analyse
</span>
</li>
Die Einrückung erhältst du automatisch so:
<ul>
<li>
<span>
Die Vorteile meiner differen- </br> zierten Analyse
</span>
</li>
</ul>
Zu einer Liste gehört immer der "ul" Tag. Dieser leitet eine Aufzählungsliste ein und mit dem li Tag beginnt ein neuer Punkt innerhalb der Liste.
Beim nächsten mal Code dazu dann ist es einfacher zu erklären und dein Problem zu verstehen.
Mit deinem HTML-Code ist die zweite Zeile nicht linksbündig.
Ja. Ohne das Smiley ist der Umbruch einfach zu bewerkstelligen:
"Die Vorteile meiner differen­zierten Analyse"
Aber mit dem Smiley funktioniert es linksbündig nicht.