Тег кнопки HTML не містить переклади на iPhone / iPad - iphone, ipad, mobile-safari, htmlbutton

У мене проблеми з тим, щоб елемент <button> правильно відображався на iPhone / iPad.

Ось приклад:

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

Ідея полягає в тому, щоб мати кнопку фіксованої ширини таобгортання тексту за потреби. В найновіших IE, FF і навіть настільному Safari (Mac і PC) все працює належним чином. Ширина кнопки фіксована, текст обгортається, а висота кнопки автоматично збільшується, щоб показати загорнуті рядки.

На iPhone / iPad текст обгортається, але висота кнопки не збільшується. Таким чином, користувач не може бачити весь текст.

Хтось має ідею про те, як зробити так, щоб це працювало на iPhone / iPad, як у браузері на робочому столі, чи це обмеження для мобільного Safari?

Відповіді:

Гаразд.Це вимагало багато спроб і помилок, але я насправді змусив це працювати. Головне - додати "висота: 100%;" у рядку стилю. Вийміть висоту, і кнопка не росте горизонтально. Додайте висоту, і кнопка зросте, якщо текст достатньо довгий, щоб викликати перенесення слів. Думаю, без зазначеної висоти мобільне сафарі заплутається. Піди розберися. Я ненавиджу писати код браузера. Захворіло думати, скільки годин програмування витрачено на такі лайна.

Після деяких робіт я виявив, що додавання цього до стилю кнопок дозволяє кнопці краще відображатися на мобільних пристроях iOS, але ви втрачаєте трохи за замовчуванням круглих стилів кнопок:

-webkit-appearance: none;

Якщо я правильно згадую з власного тестування, iPad взагалі не обробляє обриви елемента кнопки. Не знаю, чи є якийсь спосіб обійти його.

напр. це не допомогло

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