Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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 Firefox, 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>
like image 955
Thang Pham Avatar asked Mar 12 '11 04:03

Thang Pham


People also ask

What does white space Nowrap do in CSS?

nowrap : Multiple whitespaces are collapsed into one, but the text doesn't wrap to the next line.

How do you Nowrap text in CSS?

If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).

Is CSS white space sensitive?

Yes, the whitespace here does matter. Typically spaces don't matter, but CSS functions are sensitive like that.

What is white space Nowrap in HTML?

nowrap. Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered.


1 Answers

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/

like image 126
Hussein Avatar answered Oct 26 '22 13:10

Hussein