Question

以下是以下代码的jsfiddle。 http://jsfiddle.net/ux4DD/2/。我想要的是名称Harry Pham在一行中，因此我将宽度设置得非常小并且white-space:nowrap。它适用于Firefox，但不适用于IE。请帮忙

以下是答案。请看上面的JSFIDDLE看看它如何看待

<html>
<head>
   <style type="text/css">
       .linkColor{
           white-space: nowrap;
       }
   </style>
</head>
<body>
<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;">
                     <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>
</body>
</html>

Answer 1

对于IE 6和7，您需要使用<span>标记包装文本并为其指定white-space属性。由于您的文字已经包含<span>标记，并且您有一个类，因此只需将white-space属性添加到<span>类.linkColor即可。

.linkColor{
    white-space:nowrap;
}

检查http://jsfiddle.net/ux4DD/1/

处的工作示例

Answer 2

希望这会有所帮助：

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

参考：Word wrapping for button with specified width in ie7?

CSS：white-space：nowrap似乎在IE中不起作用

2 个答案:

检查http://jsfiddle.net/ux4DD/1/