Html CSS: white-space: nowrap 在 IE 中似乎不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5280521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: white-space: nowrap does not seems to work in IE
提问by Thang Pham
Here is the jsfiddleof the below code. http://jsfiddle.net/ux4DD/. What I want is the name Harry Phamto be in one line, so I make the width very small and do white-space:nowrap. It work on Firefox, but not IE. Help please
这是jsfiddle下面的代码。http://jsfiddle.net/ux4DD/。我想要的是名称Harry Pham在一行中，因此我将宽度设置得非常小并执行white-space:nowrap. 它适用于 Firefox，但不适用于 IE。请帮忙
<table cellpadding="0" cellspacing="0" style="width: 450px;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:20px;border-top:1px solid gray;white-space: nowrap;"><span class="linkColor">Harry Pham</span>
</td>
<td style="height:15px;background:url('images/line.png') no-repeat;width:28px;" width="35px"></td>
<td style="border-bottom:1px solid gray;" width="auto"></td>
</tr>
</table>
</td>
</tr>
</table>
回答by Hussein
For IE 6 and 7 you need to wrap your text with a <span>tag and give it a white-spaceproperty. Since you already have a <span>tag wrapped around your text and you have a class for it, just add the white-spaceproperty to your <span>class .linkColor.
对于 IE 6 和 7，您需要用<span>标签包装文本并为其指定white-space属性。由于您已经<span>在文本周围包裹了一个标签并且您有一个类，因此只需将该white-space属性添加到您的<span>类中即可.linkColor。
.linkColor{
white-space:nowrap;
}
Check working example at http://jsfiddle.net/ux4DD/1/
在http://jsfiddle.net/ux4DD/1/检查工作示例
回答by John
Hope this will be helpful:
希望这会有所帮助：
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(' ');
}
}
