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

Question

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

Firefox breaks the lines between words. All other browsers break the middle words of the line, which makes them 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) (does not work :)

 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 to make this work for all browsers?

Answer 1

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

Answer 2

In order for the text to break into its own, just add the indentation on the left and right to the container (div, td, etc.) of the text.