Überschrift zweizeilig zentriert

[Linuchs]

Hallo,

eine Überschrift kommt in einen Container mit border.

Der Container soll etwas breiter sein als die Überschrift und zentriert. Also links und rechts margin:auto. So sieht's aus:

Wenn der Text länger wird, wird erst die maximale Breite genutzt und dann kommt das letzte Wort in die zweite Zeile, sieht bescheuert aus:

Gibt es eine Möglichkeit, den Umbruch so zu machen, dass die beiden Zeilen etwa gleich breit sind?

Die Seite mit der langen Überschrift: HIER

LINUCHS

[Linuchs]

Gibt es eine Möglichkeit, den Umbruch so zu machen, dass die beiden Zeilen etwa gleich breit sind?

Habe jetzt mal - quick and dirty - das unauffällige Zeichen · (&middot;) an die Stelle gesetzt, die ich dann mit str_replace durch <br /> ersetze.

Ist aber nicht anwender-freundlich, das Zeichen gibt's ja gar nicht auf der Tastatur.

Linuchs

[woodfighter]

Tach,

Ist aber nicht anwender-freundlich, das Zeichen gibt's ja gar nicht auf der Tastatur.

das hängt stark von deinem verwendeten System ab, hier bei mir ist · ganz einfach <AltGr + ,>.

mfg
Woodfighter

[Gunnar Bittersmann]

@@Linuchs

Wenn der Text länger wird, wird erst die maximale Breite genutzt und dann kommt das letzte Wort in die zweite Zeile, sieht bescheuert aus:

Was auch bescheuert aussieht: " statt Anführungszeichen „“ und - statt Gedankenstrich – (noch dazu nicht einheitlich). „Merke: Der Bindestrich steht nie zwischen zwei Leerzeichen!“

Gibt es eine Möglichkeit, den Umbruch so zu machen, dass die beiden Zeilen etwa gleich breit sind?

Mit CSS glaube ich nicht.

Ein <br/> an die passende Stelle zu setzen ist eine Option, wenn man denn Herr des Inhalts ist. Wenn die Texte von anderen gepflegt werden oder gar von Nutzern generierte Inhalte sind, dann müsste man das durch JavaScript erledigen:

Wenn berechnete Höhe der Box = 2 Zeilenhöhen:
  p = halbe Länge des Strings
  Solange Zeichen an Position p kein Whitespace:
    Inkrementiere p
  Ersetze das Whitespace an Position p durch <br/>

Es ist nicht gesagt, dass man damit immer das bestmögliche Ergebnis erzielt; aber wohl immer ein besseres als ohne das Script.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Es ist nicht gesagt, dass man damit immer das bestmögliche Ergebnis erzielt; aber wohl immer ein besseres als ohne das Script.

Wohl nicht immer. Es kann auch passieren, dass man damit aus einer zweizeiligen Überschrift eine dreizeilige macht. Das wäre hinterher noch abzufragen und in dem Fall das <br/> wieder zu entfernen.

LLAP 🖖

[Tabellenkalk]

Hallo,

Wenn berechnete Höhe der Box = 2 Zeilenhöhen:
  p = halbe Länge des Strings
  Solange Zeichen an Position p kein Whitespace:
    Inkrementiere p
  Ersetze das Whitespace an Position p durch <br/>

ich würde vom ersten p ausgehend in beide Richtungen suchen und das Nächstgelegene nehmen.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

ich würde vom ersten p ausgehend in beide Richtungen suchen und das Nächstgelegene nehmen.

Das hatte ich auch erst im Sinn, dann aber verworfen, weil es vermutlich besser aussieht, wenn die erste Zeile länger ist als die zweite, auch wenn das u.U. Zu einem größeren Unterschied in den Zeilenlängen führt.

Mir ist auch bewusst, dass die Mitte des Strings in Zeichen nicht die visuelle Mitte sein muss, da sich bspw. i und m unterschiedlich auf die beiden Hälften verteilen können. Aber das kann man wohl hier vernachlässigen, die Lösung sollte gut genug sein.

LLAP 🖖