Word Wrapping For Button With Specified Width In Ie7?

So I have a submit button with a specified width and the containing text is pulled in from elsewhere, it's dynamic. The problem is that in ie7, the text does not overflow properly

Solution 1:

I have a similar problem with buttons containing dynamic localized strings.

The best solution would probably be not to use the <button> tag at all. You can replace it with <a> tags styled as buttons. IE seems to handle wrapping fine in that case.

In my case, thats not an easy option. So I made a polyfill that patches the IE rendering:

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(' ');
    }
}    

Solution 2:

add the following css option to your button:

white-space: nowrap;