IE7中指定宽度的按钮自动换行？

Question

我有一个提交按钮，它有指定的宽度，其中包含的文本是从其他地方获取的，是动态的。问题在于，在ie7中，文本不能正确地溢出并换行到第二行，它只是一直向右延伸！

以下是html代码：

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

还有CSS。

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

我在其他地方看到有人建议在按钮文本中加入换行符，但是这对我来说行不通，因为文本长度是动态的。

有什么好的想法吗？

- igneosaur

---

为什么在按钮上使用宽度？如果您删除宽度，它将适应所有文本。但是它会变成一个很长的按钮。 - Jaspero

按钮上有更多的样式，我只列出了关键部分。它们必须是固定宽度，因为它们本质上是一个列表。 - igneosaur

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

- Dmitry Torba

---

好的，看起来我已经得到了答案，谢谢你。我不记得最后我实际上做了什么！ - igneosaur

Answer 2

将以下 CSS 选项添加到您的按钮中：

white-space: nowrap;

- Tom Claus