Обертывание кнопок в IE7

Question

Свойство value иногда изменяется на очень длинное, длиннее 50px.

<input type="submit" Value="Really long" style="width:50px; white-space:normal" />

Это прекрасно работает в IE8 + и Firefox, так как текст на кнопке переносится на следующую строку.

Проблема в том, что это должно работать в IE7, а текст не переносится.

Кто-нибудь знает, как заставить его переноситься в IE7?

Answer 1

К сожалению, я все еще поддерживаю IE7 и столкнулся с этой проблемой. Если вы можете изменить <input /> на <button>, вы можете вставить <span> внутри кнопки с помощью display:inline-block, чтобы решить проблему переполнения.

<button>
    <span style="display:inline-block">Long button text goes here</span>
</button>

Answer 2

Немного клуджа, но в IE7 это будет выглядеть корректно:

 <input type="submit" Value="Really 
 long" style="width:50px; white-space:normal" />

В основном вам нужно добавить разрыв строки в HTML.Эта «техника» - обходной путь ... Если вы вручную напишите свой HTML, это будет вариант, но если ваш код генерируется (например, ASP.Net), он может не работать.

См. этот jsFiddle в IE7.

Answer 3

Вставьте <br /> в значение и убедитесь, что doctype указано правильно.

Answer 4

Не совсем точно, чего вы хотите достичь, однако вы можете попробовать использовать атрибут размера во входном теге, AS WELL в качестве css.

<input size="50" type="submit" Value="Really long" style="width:50px; white-space:normal" />