Problem mit der Überschrift h1

[Luebeck]

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]

Dazu werden die Worte, die nicht getrennt werden sollen, in span-Elemente eingebettet und mit der Anweisung

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

 

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.

 

[Luebeck]

@MrMurphy vielen Dank :)