L'étiquette de bouton HTML ne fait pas de texte sur l'iPhone/iPad

Question

Je rencontre des difficultés pour obtenir le <bouton> élément de rendre correctement sur l'iPhone/iPad.

Voici l'exemple:

<button type="button" style="width:150px; word-wrap:break-word;">some very long text to make it wrap and go to another line</button>; 

L'idée est d'avoir un bouton de largeur fixe et le texte enveloppe au besoin. Dans le plus récent IE, FF, et même Safari de bureau (Mac et PC) les choses fonctionnent comme prévu. La largeur du bouton est fixe, le texte s'enroule et la hauteur du bouton augmente automatiquement pour afficher les lignes encapsulées.

Sur l'iPhone/iPad, le texte est renvoyé mais la hauteur du bouton n'augmente pas. Ainsi, l'utilisateur ne peut pas voir tout le texte.

Est-ce que quelqu'un a une idée sur la façon de faire ce travail sur l'iPhone/iPad comme sur le navigateur de bureau ou est-ce une limitation de Safari mobile?

Answer 1

Ok. Cela a pris beaucoup d'essais et d'erreurs, mais je l'ai vraiment fait fonctionner. La clé est d'ajouter "hauteur: 100%;" dans la chaîne de style. Sortez la hauteur et le bouton ne pousse pas horizontalement. Ajouter de la hauteur et le bouton ne pousse si le texte est assez long pour provoquer un mot-wrap. Devinez sans une hauteur spécifiée safari mobile devient confus. Allez comprendre. Je déteste écrire le code du navigateur. Dégoûtant de penser combien d'heures de programmation sont gaspillées sur la merde comme ça.

Answer 2

Si je me souviens bien de mes propres tests, l'iPad ne gère pas du tout les ruptures sur l'élément bouton. Aucune idée s'il y a un moyen de contourner cela.

par exemple. cela ne fonctionnera pas

<button>First<br/> 
    Second<br/> 
    Third<br/> 
    Fourth<br/> 
</button> 

Answer 3

Après avoir fait un travail que j'ai trouvé que l'ajout de ce au style de bouton permet le bouton pour rendre mieux sur iOS appareils mobiles, mais vous perdez un peu de style rond par défaut des boutons:

-webkit-appearance: none;