Problem mit der Überschrift h1

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Luebeck

Neues Mitglied
14 Mai 2019
8
0
1
32
Hallo noch einmal,

ich habe meine neu erstellte Webseite geprüft, ob Sie responsive ist. Hierzu habe ich das Tool http://quirktools.com/screenfly/
verwendet. Ich bin noch Anfängerin. Habt ihr auch bessere Erfahrungen mit einem anderen Tool gemacht?

Nun zu meinem eigentlichen Problem:

Ich habe eine Überschrift h1, wie z. B. Rechtsanwalt Max Mustermann.

Bei großen Displays ist das kein Problem. Aber bei unterschiedlichen Handy-Displays tritt das Problem auf, dass die erste Zeile wie folgt aussieht:

Rechtsanwalt Max
Mustermann

d. h. der Vorname verschiebt sich in die erste Zeile. Eigentlich will ich die folgende Ansicht bei den Handydisplays:

Rechtsanwalt
Max Mustermann

ohne eine Verschiebung des Vornamens bei größeren Displays.

Hat jemand ein Tipp für mich?
Ich habe die Webseite mit dem Editor erstellt und das Flexbox-layout mit Media Queries verwendet.
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.488
217
63
Dazu werden die Worte, die nicht getrennt werden sollen, in span-Elemente eingebettet und mit der Anweisung

Code:
white-space: nowrap;
Zeilenumbrüche verhindert.

Vorteil: Falls die Worte bei schmalen Bildschirmen doch umgebrochen werden sollen kann dies mittels CSS einfach erlaubt werden.

Ersatzweise kann statt der normalen Leerzeichen auch ein geschütztes Leerzeichen

Code:
 
eingefügt werden. Das mag im ersten Moment einfacher erscheinen, hat aber den Nachteil dass die im Quelltext gelöscht werden müssen, falls die Worte doch umgebrochen werden sollen.
 
Werbung: