Question

所以我有一个指定宽度的提交按钮，包含的文本从其他地方拉入，它是动态的。问题是在ie7中，文本没有正确溢出并换行到第二行，它只是遗忘了！

这是html。

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

和css。

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

我看到有人建议在其他地方将换行符放入按钮的文本中，但这对我不起作用，因为文本长度是动态的。

有什么想法吗？

Answer 1

我对包含动态本地化字符串的按钮有类似的问题。

最好的解决方案可能是根本不使用<button>标记。您可以将<a>标签替换为按钮。在这种情况下，IE似乎处理好包装。

就我而言，这不是一个简单的选择。所以我制作了一个补充IE渲染的polyfill：

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;

在ie7中用指定宽度的按钮换行？

2 个答案: