HTML-тег кнопки не переносит слова на iPhone / iPad

Question

У меня проблемы с получением элемента для правильной визуализации на 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?

Answer 1

Вы можете задать цвет фона: #dedede.Потому что IOS не поддерживает цвет "buttonface".

Так что просто добавьте это на свой CSS.

background-color: #dedede;

Answer 2

Хорошо. Это заняло много проб и ошибок, но я действительно заставил это работать. Ключ должен добавить «высота: 100%;» в строке стиля. Выньте высоту и кнопка не будет расти горизонтально. Добавьте высоту, и кнопка будет расти, если текст достаточно длинный, чтобы вызвать перенос слов. Угадай без указанной высоты мобильное сафари запутается. Пойди разберись. Я ненавижу писать код браузера. Отвращение к мысли о том, сколько часов программирования тратится на такую ​​ерунду.

Answer 3

После некоторой работы я обнаружил, что добавление этого в стиль кнопки позволяет лучше отображать кнопку на мобильных устройствах iOS, но вы теряете немного стандартного стиля кнопок по умолчанию:

-webkit-appearance: none;

Answer 4

Если я правильно помню из моего собственного тестирования, iPad вообще не обрабатывает разрывы на кнопочном элементе. Не знаю, есть ли способ обойти это.

например. это не сработает

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