对于IE7中指定的宽度按钮自动换行？ [英] Word wrapping for button with specified width in ie7?

问题描述

所以我有一个指定宽度的提交按钮，包含文本是从其他地方拉的，它是动态的。问题是，在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 and wrap onto a second line, it just runs off into oblivion!

下面是HTML。

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

和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.

任何想法？

推荐答案

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

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

最好的解决办法可能是不使用＆LT;按钮和GT; 标签都没有。你可以用＆LT更换; A＆GT;的样式按钮标记。 IE浏览器似乎来处理这种情况下，包装精美。

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.

在我而言，那不是一个容易的选择。所以我做了修补IE浏览器渲染填充工具：

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

这篇关于对于IE7中指定的宽度按钮自动换行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！