CSS Zweizeiligen Text zentrieren

[Rossie]

Ich versuche gerade mittels CSS den zweizeiligen Text eines Buttons so zu zentrieren, dass der Text linksbündig bleibt (also nicht wie mit text-align:center). Gibt es dafür einen Trick?

Das Ergebnis sollte so aussehen wie der grüne Button im Playground ohne dass eine fixe Breite vorgegeben wird: https://play.tailwindcss.com/9QJJvqcQyI. Wie kann man beim Zeilenumbruch erreichen, dass der Container die minimale Breite einnimmt?

 

[floq0r]

Wo genau ist das Problem? align left ist eh der default behavior, wenn du den Text unbedingt so abgeschnitten möchtest wie im grünen Button brauchst du ein parent element mit border-radius, sollte eigentlich auch mit border-radius im selben Element so sein. Der rote Button hat scheinbar ein padding.

 

[Rossie]

Das Problem ist, dass der Text im roten Button nicht zentriert ist. Der Text muss weiter nach rechts. Die weißen Hilfslinien für den Container haben hier vielleicht abgelenkt: https://play.tailwindcss.com/TU7JuU8h6R. Im Text Container soll der Text linksbündig sein – was bereits der Fall ist.

Hintergrund ist, dass die Übersetzung des Labels mehr Platz in Anspruch nimmt, aber der Button nicht breiter werden darf.

 

[floq0r]

Also er darf höher werden aber nicht breiter? Gib mal die Breite fix vor und gib ein padding an.

 

[Rossie]

Die Seite wird automatisch übersetzt und das Markup muss für beide Sprachen funktionieren. Der Button hat eine Breite vorgegeben - wie im Beispiel gezeigt. Ein Padding, dass für die Übersetzung funktionieren würde, führt beim Original zum Umbruch, was vermieden werden soll.

 

[floq0r]

Wo soll der Text dann hin? Zum Umbruch fallen mir noch whit-space: nowrap und word-break: none (?) ein

 

[Rossie]

Die Höhe ist veränderlich - die Breite nicht. Ziel ist wie gesagt ein Ergebnis wie oben, aber ohne eine fixe Breite für den Text Container vorzugeben.

 

[netzgestaltung]

du brauchst dazu 2 Elemente - den Button oder Link und da drin noch Beispielsweise einen Span.

es gibt verschiedene varianten, je nach Einsatzzweck:

1. alt: Beide Elemente werden auf Display Block gesetzt und das innere bekommt eine Fixe Breite(für den Zeilen umbruch) sowie margin-left:auto; und margin-right:auto;.
2. neu: das Äußere Element bekommt display:flex; und justify-content:center; Das Innere Element eine Flex-Basis oder max-width.
3. weitere Varianten sind zb mit Grid möglich, das nutz ich aber nur selten.

dein Beispiel macht btw exakt 2.

Es gibt keine minimalbreite bei mehrzeiligen Texten.
Die nehmen solange Platz ein bis keiner mehr da ist.

 

[floq0r]

@Rossie Dann gäbe es noch minmax() aber was du beschreibst klingt wie "Wasch mir den Pelz aber mach mich nicht nass"

 

[Rossie]

Es gibt keine minimalbreite bei mehrzeiligen Texten.
Die nehmen solange Platz ein bis keiner mehr da ist.

Sehr schade, dass dies nicht möglich ist. Als Workaround wurden in die Übersetzungen händisch Zeilenumbrüche eingefügt. Damit funktioniert justified-content wie gewünscht.

 

[netzgestaltung]

Ja aber das ist nicht Mobile-Tauglich bzw dann nur wenn die Textlänge da auch passt.
Bricht der Text aber an anderen Stellen um wirds plötzlich Vierzeilig.

 

[Rossie]

@netzgestaltung Wurde natürlich getestet und funktioniert durch die fixe Breite zufriedenstellend. Dass dies keine befriedigende Lösung ist, dürfte klar sein. Ich hätte es gerne ohne JavaScript umgesetzt. Geht aber wohl leider nicht.

 

[netzgestaltung]

Naja - ich würde mich eher nochmal hinterfragen warum ich das genau da genau so benötige und welche alternativen es sonst noch gibt.

 

[Rossie]

@netzgestaltung Vorschläge sind immer willkommen. Welche Möglichkeiten siehst du hier?

 

[netzgestaltung]

das kann ich dir so nicht beantworten, das hängt ja von dem kontext und der aufgabe sowie dem design des inhalts ab. Dein Beispiel ist ganz ohne Kontext, daher diesbezüglich nicht bewertbar. Ansonsten hast du hier vorgefertigte Komponenten: https://tailwindui.com/components - kannst aber auch individuell bauen.