开发者

CSS: white-space: nowrap does not seems to work in IE

Here is the jsfiddle of the below code. http://jsfiddle.net/ux4DD/. What I want is the name Harry Pham to be in one line, so I make the width very small and do white-space:nowrap. It work on Fire开发者_StackOverflow社区fox, but not IE. Help please

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


For IE 6 and 7 you need to wrap your text with a <span> tag and give it a white-space property. Since you already have a <span> tag wrapped around your text and you have a class for it, just add the white-space property to your <span> class .linkColor.

.linkColor{
    white-space:nowrap;
}

Check working example at http://jsfiddle.net/ux4DD/1/


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

Ref: Word wrapping for button with specified width in ie7?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜