Jalara Studio

Text im Button umbrechen

#


Wer Schaltflächen (engl. buttons) mit Zeichenketten wie ›Zahlungspflichtig bestellen‹ oder ›In den Warenkorb‹, auf mobilen Geräten nicht mit einer zu kleinen Schriftgröße anzeigen möchte, kann deren Texte auch mit folgender CSS-Regel umbrechen:

@media screen and (max-width: 480px) {
    input.button,
    a.add_to_cart_button {
        white-space: normal;
    }
}

Erklärung: Wird der Wert normal auf die Eigenschaft white-space angewendet, werden Leeräume (engl. whitespace), wenn nötig, in einem Text umgebrochen. Der Text innerhalb der Schaltflächen ›In den Warenkorb‹ und ›Zahlungspflichtig bestellen‹ wird daher umgebrochen, sobald die maximale Anzeigegröße (inkl. Seitenrand (engl. margin) des Buttons erreicht ist:

Hinweis: Die Eigenschaft white-space wird vom Internet Explorer ab Version 8.0 unterstützt.