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

发布于 2024-11-03 19:55:55 字数 410 浏览 1 评论 0原文

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

这是 HTML。

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

还有CSS。

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

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

有什么想法吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

手长情犹 2024-11-10 19:55:55

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

最好的解决方案可能是根本不使用

就我而言，这不是一个简单的选择。所以我做了一个修补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(' ');
    }
}

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

回复收藏 0 原文