CSS One Line DIV white-space: nowrap; Tutorial

Gerade bei Call to Action Buttons braucht man ein CSS One Line DIV, damit die Call to Action nicht einfach umbricht. Aktuell hatte ich den Anwendungsfall in einem responsive HTML Layout in einem CSS Button im Header der Startseite. In der Vergangenheit ist mir das ganze allerdings auch in den Link Buttons in einem Slider über den Weg gelaufen. Ganz einfach mann man das mit der CSS Property white-space erreichen. Der Wert muss hier einfach auf no-wrap gesetzt werden.

Zeile ohne Umbruch – CSS One Line DIV mit white-space nowrap

.my-div {white-space: nowrap;}

Es gibt sicher viele Wege, wie man diese Aufgabe hier lösen kann. Für mich ist der hier aber einfach gut. Es ist ein Onliner und Nobrainer. Als PHP-Backend Developer fehlen mir allerdings die täglichen Anwendungsbereiche, damit ich diese kleinen CSS-Tricks hier schnell parat habe. Ob das auch die optimale Lösung ist und für alle Browser etc. gilt weiß ich leider aber auch nicht.

Responsive Webdesign Zeilenumbruch durch Media Query

Generell kann man einfach mal festhalten, dass Seiten auf großen Desktop Monitoren ganz gut aussehen. Vorausgesetzt sie haben eine maximale Gesamtbreite. Probleme kommen oft bei der senkrechten Smartphone Auflösung. Das passiert gerade bei Einzeilern, die nicht umbrechen. Hier kann man natürlich einfach mit einem Media Query bei entsprechender Größe ein „white-space: none;“ setzen. Damit sind die Probleme aber leider nicht gelöst. Lange Wörter oder viele machen hier auch Probleme. Also laufen die Angaben immer noch raus oder werden dreizeilig. Das ist für Headline, wie hier im Blog echt ok. Call to Actions sollten aber kein „Jetzt kostenlos bestellen“ haben.

Sulu CMS mit cleverer Voransicht für Redakteure

Wenn etwas nicht leicht zugänglich ist, dann wird es leider auch nicht gemacht. Eine tolle Innovation hat hier das Sulu CMS für Redakteure. In der zweigeteilten Ansicht zwischen Datenpflege auf der linken und Preview auf der rechten, kann man hier ganz einfach Smartpfone, Tablet und Desktop Preview Ansicht auswählen. So kann man als Redakteur auch direkt in der Smartphone Preview Ausgabe arbeiten und hier alles schön machen. Dann klappt das auch ganz einfach auf Tablet und Desktop. Umgekehrt kommen ja einfach die Probleme auf.