La balise de bouton HTML ne couvre pas les mots sur iPhone / iPad - iphone, ipad, mobile-safari, htmlbutton

J'ai du mal à faire en sorte que l'élément <button> s'affiche correctement sur l'iPhone / iPad.

Voici l'échantillon:

<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 à largeur fixe etle texte passe au besoin. Dans les plus récents 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 est automatiquement augmentée pour afficher les lignes enveloppées.

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

Quelqu'un a-t-il une idée sur la façon de faire fonctionner cela sur l'iPhone / iPad comme sur le navigateur de bureau ou est-ce une limitation de Safari mobile?

Réponses:

D'accord. Cela a pris beaucoup d'essais et d'erreurs, mais je l'ai fait fonctionner. La clé est d'ajouter "hauteur: 100%;" dans la chaîne de style. Retirez la hauteur et le bouton ne pousse pas horizontalement. Ajoutez de la hauteur et le bouton s'agrandit si le texte est suffisamment long pour provoquer un retour à la ligne. Devinez sans un safari mobile de hauteur spécifiée devient confus. Allez comprendre. Je déteste écrire du code de navigateur. Déçus de penser combien d'heures de programmation sont gaspillées sur de la merde comme ça.

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

-webkit-appearance: none;

Si je me souviens bien de mes propres tests, l'iPad ne gère pas du tout les éléments du bouton. Aucune idée s'il existe un moyen de le contourner.

par exemple. cela ne fonctionnera pas

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