How do you force line breaks between words only in css/html?

Question

I have just a regular piece of text in a <p> tag inside a <div> tag. But only Firefox displays it correctly.

Firefox breaks the lines between the words. All other browsers break the line mid-word which makes it difficult to read.

Here is an example of what I mean:

Firefox (working):

This was busy in it was I was here. Let 
him as being within eight by their 
graves, to go down upon her to be a 
dozen directly. So, leaving word 
following, poor mother, of other man, 
and my finger on his blue flag, and the 
habit of tea on a bit. I might feel 
very sorry there is rich, too; late of 
his deepest voice...

All other browsers (IE5-8, safari, chrome) (not working:)

This was busy in it was I was here. Le
t him as being within eight by their g
raves, to go down upon her to be a doz
en directly. So, leaving word followin
g, poor mother, of other man, and my f
inger on his blue flag, and the habit 
of tea on a bit. I might feel very sor
ry there is rich, too; late of his dee
pest voice...

How do I make this work for all browsers?

Polypus

Huh? Can you show the HTML for that? It shouldn't work like that. – Scyros

As pekka says, that is abnormal. Use IE Developer Tools to look at the DOM and find out what styles are being applied to your paragraph. If you post your findings, we can probably point you to the problem. – Mccurdy

@Pekka: w3.org/TR/2005/WD-css3-text-20050627/#word-wrap Funnily enough, even though this is CSS3, it appears to have been supported by IE since version 5.5: blooberry.com/indexdot/css/properties/text/wordwrap.htm – Martynne

Answer 1

Somewhere in your css you probably have word-wrap: break-word. Find it and change it to word-wrap: normal (or simply remove the word-wrap element altogether).

Abdicate

Yes I have checked this. I have no such statement in my css. I added body *{word-wrap: normal;} just to be sureand it changes nothing. – Polypus

word-break: break-all; was set. It was there for handling Japanese and should have been taken out for the English version. – Polypus

Ah! Glad you figured it out :) – Abdicate

Answer 2

For text to break on his own just add padding on left and right side to the container (div, td etc.) of text.

Katzen