Question

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 and wrap onto a second line, it just runs off into oblivion!

Here is the html.

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

And the css.

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

I have seen people suggest elsewhere to put line breaks into the button’s text but this will not work for me as the texts length is dynamic.

Any ideas?

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