Tutorial :HTML Tables - How to make IE not break lines at hyphens



Question:

I have some table cells containing dates formatted like this: 2009-01-01. I.E 7 seems to be breaking these into two lines at the hyphen. Is there any way to turn this off?


Solution:1

You are looking for the white-space property, which affords you control over how white space and line-breaks affect the content of your element. To collapse white space sequences, but prevent line-breaks, you can use the nowrap value:

.dates {      white-space: nowrap;  }  
<td class="dates">2009-01-01</td>  


Solution:2

I'm sure there's a better CSS way but the old way is with a no-break: <nobr>...</nobr> but using no-break will cause nothing to go to the next line.

Another way is to use a Non-breaking hyphen. This way, you can still get wrapping, just not at the hyphen.


Solution:3

Use this CSS:

.nowrap {      white-space: nowrap;  }  

Wrap your dates like: <span class="nowrap">2009-01-01</span>.

Edit: the advantage of this solution over others is that it gives you more precise control over what should or should not wrap. Your cells may still wrap for spaces and other hyphens, outside the span.


Solution:4

I've tried all these suggestions. None worked. Found the solution on another Stack Overflow page: No line-break after a hyphen. You can use the code for non-breaking hyphen, &#8209;.


Solution:5

increase the size of your TD and it wont be a problem


Solution:6

This is NOT the correct way of answering your question, but this is how I do it:

<td>Hello&nbsp;-&nbsp;World</td>  

I like this method better because you do not need to add a <style> or class attribute. Also, it makes the text one string so that it cannot be line wrapped by the browser.

Like I said, most people would disagree, but I think this is where a practical solution is better than the standards solution.


Solution:7

My stupid mistake was that I forgot to put spaces between as I set spacing with padding. I had like <span>Bla 1</span><span>Bla 2</span><span>Bla 4</span>
and it wasn't breaking line as I thought it should. So now I have:
<span>Bla 1</span> <span>Bla 2</span> <span>Bla 4</span>
and of course it works as it should and is anticipated.

Maybe my mistake will help someone....


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »