Html 段落自动换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19409487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Paragraph auto newline
提问by user188703
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;but it doesn't work.Any suggestions?
在 DIV 中，我放置了段落，但是当文本比 div 长时，它不会创建新行而是从 DIV 中删除。我尝试使用： -moz-hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto; hyphens:auto; word-wrap:break-word;但它不起作用。有任何建议吗？
Here is code of div:
这是div的代码：
<div id="content">
<p id="test">tfufygigighfetefddddddddddddsssssssssssssssssssssssssssssssssssssssssssfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
</div>
css code of div:
div的css代码：
#content {
float:left;
position:absolute;
background-color:#D4D3D0;
height:500px;
width:80%;
}
and the css of paragraph:
和段落的css：
p.test {
-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}
回答by Scott Rowell
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!
我要出去玩了！但我相信你需要放入word-wrap: break-word;div css，而不是<p>css。这个对我有用！
Edit:
编辑：
Oh wait, I can see what you did wrong. The name of the <p>tag isn't p.testit's #test!
哦等等，我知道你做错了什么。<p>标签的名称不是p.test它#test！
回答by jbarnett
add word-wrap: break-word;to #content
添加word-wrap: break-word;到#content
You can also remove those styles from your pelement.
您还可以从p元素中删除这些样式。
回答by Osman Hamashool
I believe you need to add this two line in #content
我相信您需要在#content 中添加这两行
#content{
word-wrap: break-word;
white-space:pre-wrap;
}
回答by muTheTechie
This will print each sentence in each line, without <br>
这将打印每一行中的每个句子，而不 <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/
例如检查 jsfiddle http://jsfiddle.net/muthupdiant/sgp8rjfs/
