Перенос слов для кнопки с указанной шириной в ie7?

Question

Итак, у меня есть кнопка отправки с заданной шириной, и содержащий ее текст извлекается откуда-то еще, он динамический. Проблема в том, что в ie7 текст не переполняется должным образом и переносится на вторую строку, он просто уходит в небытие!

Вот HTML.

<input type="submit" value="<?php echo $dynamic_data ?>" class="custom-submit">

И КСС.

.custom-submit {
    height: 76px;
    white-space: normal;
    width: 140px;
}

Я видел, как в другом месте люди предлагали вставлять разрывы строк в текст кнопки, но это не сработает, так как длина текста динамическая.

Есть идеи?

Answer 1

У меня похожая проблема с кнопками, содержащими динамические локализованные строки.

Лучшим решением, вероятно, было бы вообще не использовать тег <button>. Вы можете заменить его тегами <a> в стиле кнопок. В этом случае IE, похоже, прекрасно справляется с переносом.

В моем случае это не простой вариант. Поэтому я сделал polyfill, который исправляет рендеринг IE:

http://jsfiddle.net/dmitrytorba/dZyzr/247/

var buttons = document.getElementsByTagName('button');
for(var j=0; j < buttons.length; j++) {
    var button = buttons[j];
    var textNode = button;
    while(textNode.children[0]) {
        textNode = textNode.children[0];
    }
    var text, words, numSplits;
    var spacing = 0;
            while(button.scrollWidth !== 0 && button.clientWidth !== 0 &&
                  button.scrollWidth > button.clientWidth) {
        if(!spacing) {
            text = textNode.innerHTML;
            words = text.split(' ');
            numSplits = Math.ceil(button.scrollWidth / button.clientWidth);
            spacing = Math.round((words.length)/numSplits);
        }
        for(var i = spacing; i < words.length; i+=spacing+1) {
            words.splice(i , 0, '<br />');
        }          
        textNode.innerHTML = words.join(' ');
        spacing--;
        words = text.split(' ');
    }
}    

Answer 2

добавить следующую опцию css к вашей кнопке:

white-space: nowrap;