Table breaks layout with long characters

[Sonyk]

Can anyone tell me why a string of long continuous characters will break a table, while a long paragraph will not? Take a look at the attachment to see what I am referring to. You will see that the first table looks fine, but the second table is "broken" due to the long string of numbers in the second cell. How come a long paragraph won't "break" a table while a long continuous string of characters will? I have a feeling that the breaks, or white spaces, between words in the first table has something to do with it, but I'm not sure.

[Mittineague]

Yes, your feeling is correct. Browsers know to "insert newline" at a whitespace character. But with a long line of unbroken characters (eg. a long URL) the browser doesn't know where to break the string so it doesn't.

What to do? There are different solutions. eg. overflow: hidden, overflow:scroll and others.

[Rayzur]

How come a long paragraph won't "break" a table while a long continuous string of characters will? I have a feeling that the breaks, or white spaces, between words in the first table has something to do with it, but I'm not sure.

Hi,
It looks like you've answered your own question. Yes you are correct, the breaks between the words is what allows the text to wrap.

We do have a the word-wrap property available to us with CSS3 so it will break words when needed.

word-wrap: break-word;

.

[Stevie D]

Another option is the 'soft hyphen' - if you put the character entity ­ in where you want to allow a break, the browser should hyphenate the word there if it needs to, but keep the word together if not.

[Sonyk]

Thanks everyone for your replies. I appreciate it. Very helpful.

[Stevie D]

Sorry, I've just realised that this stupid forum software converted my character entity into the character itself - what it should say in my post is to use & shy; (but without the space, obviously).

Off Topic:

Grrr - stupid stupid software!
When I just type in an entity, eg & s h y ;, it converts it into the character, but if I try to get around that by giving the & as an entity, it prints the whole of & a m p ; s h y ;. Stupid stupid stupid!

[goldfidget]

I've done <span class="break"> </span> .break {font-size:1px} before. Run your content through some kind of filter before writing it to your database and if you encounter a string longer than say 100 characters, break it up with a shy or a styled span or similar.