Tag przycisku HTML nie obsługuje zawijania tekstu na iPhone / iPad - iphone, ipad, mobile-safari, htmlbutton

Mam problem z prawidłowym renderowaniem elementu <button> na iPhonie/iPadzie.

Oto przykład:

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

Chodzi o to, aby mieć przycisk o stałej szerokości, aw razie potrzeby zawija tekst. W najnowszych IE, FF, a nawet desktopowym Safari (Mac i PC) wszystko działa zgodnie z oczekiwaniami. Szerokość przycisku jest stała, tekst zawija się, a wysokość przycisku jest automatycznie zwiększana, aby pokazać zawinięte linie.

Na iPhonie/iPadzie tekst zawija się, ale wysokość przycisku nie wzrasta. W ten sposób użytkownik nie może zobaczyć całego tekstu.

Czy ktoś ma pomysł, jak sprawić, by to działało na iPhonie/iPadzie jak w przeglądarce komputerowej, czy jest to ograniczenie mobilnego Safari?

Odpowiedzi:

Dobrze.Wymagało to wielu prób i błędów, ale udało mi się. Kluczem jest dodanie „wysokość:100%;” w ciągu stylu. Wyjmij wysokość, a guzik nie rośnie w poziomie. Dodaj wysokość, a przycisk będzie rósł, jeśli tekst jest wystarczająco długi, aby spowodować zawijanie wyrazów. Zgadnij bez określonej wysokości mobilnego safari jest zdezorientowany. Domyśl. Nienawidzę pisania kodu przeglądarki. Chore na myślenie, ile godzin programowania marnuje się na takie bzdury.

Po wykonaniu pewnych prac odkryłem, że dodanie tego do stylu przycisku pozwala na lepsze renderowanie przycisku na urządzeniach mobilnych z systemem iOS, ale tracisz trochę domyślnego okrągłego stylu przycisków:

-webkit-appearance: none;

Jeśli dobrze pamiętam z własnych testów, iPad w ogóle nie obsługuje przerw na elemencie przycisku. Nie mam pojęcia, czy można go obejść.

na przykład to nie zadziała

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