段落自动换行

Question

In DIV I put paragraph but when text is longer then div,it does not make new line but out of the DIV.I try with: -moz-hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto; hyphens:auto; word-wrap:break-word; -moz-hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto; hyphens:auto; word-wrap:break-word; but it doesn't work.Any suggestions?

Here is code of div:

<div id="content">
<p id="test">tfufygigighfetefddddddddddddsssssssssssssssssssssssssssssssssssssssssssfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
</div>

css code of div:

#content {
float:left;
position:absolute;
background-color:#D4D3D0;
height:500px;
width:80%;
}

and the css of paragraph:

p.test {
-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}

Answer 1

I'm going out on a limb here! But I believe you need to put word-wrap: break-word; in the div css, instead of the <p> css. It works for me!

Edit:

Oh wait, I can see what you did wrong. The name of the <p> tag isn't p.test it's #test !

Answer 2

add word-wrap: break-word; to #content

You can also remove those styles from your p element.

Answer 3

I believe you need to add this two line in #content

#content{
    word-wrap: break-word;
    white-space:pre-wrap;
}

Answer 4

This will print each sentence in each line, without <br>

<p style="font-family:courier;white-space: pre;">
First Line
Second Line
Third Line
</p>

For example check jsfiddle http://jsfiddle.net/muthupandiant/sgp8rjfs/