Unterschiedliche Textgröße (zB Nachname, Vorname/Vorname) für Button im Responsive Design Bootstrap mit Jquery

Question

Ich arbeite an meiner Aufgabe, ich bin fast fertig mit dem Code. Ich brauche nur Hilfe für ein einzigartiges Design.

Ich habe 3 Tasten mit etwas Text. Für Vollbild ist der Text sagen "HelloWorld", "LastFirst", aber wenn die gleiche Website auf Handy gesehen wird, ändert sich der Text dieser 3 Tasten zu "Hallo", "Last" usw.

Ich habe ein paar Dinge im Sinn, mit der Text als Label. Wenn ich diesen Etiketten ID gebe und das Etikett bei Bedarf ausbleiche.

Ich würde gerne wissen, ob es eine korrekte oder einfachere Möglichkeit gibt, es zu tun?

Vielen Dank im Voraus.

Answer 1

Ich nehme an, Sie verwenden Bootstrap.

Bootstrap hat diese .visible-xs und .hidden-xs Klassen (more here)

.hidden-xs-Klasse hilft Ihnen, ein Element nur auf dem Handy verstecken.

<button type="button" class="btn btn-primary"> 
 
    Hello <span class="hidden-xs"> World </span> 
 
</button> 
 
<button type="button" class="btn btn-primary"> 
 
    Last <span class="hidden-xs"> First </span> 
 
</button>

Wenn Sie nicht mit Bootstrap sind, können Sie die gleichen mit Medienanfragen erreichen.

@media screen and (max-width: 300px) { 
 
    .hidden-xs { 
 
    display: none; 
 
    } 
 
}

<button type="button" class="btn btn-primary"> 
 
    Hello <span class="hidden-xs"> World </span> 
 
</button> 
 
<button type="button" class="btn btn-primary"> 
 
    Last <span class="hidden-xs"> First </span> 
 
</button>