Html <p> 当文本超过宽度时，继续换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13790170/
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
<p> when text exceeds width, continue in new line
提问by Dragan
I have the following structure:
我有以下结构：
<ul>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
</ul>
When the text of the p exceeds the 10px limit I would like it to continue in a new row.. How do i do that? Thanks
当 p 的文本超过 10px 限制时，我希望它在新行中继续.. 我该怎么做？谢谢
回答by Oleg
Your example already word-wraps (because<p>is already a block element), if you want to break words, then you could try:
您的示例已经自动换行（因为<p>已经是块元素），如果您想打破单词，那么您可以尝试：
p.letters {
word-wrap: break-word;
}
Here's a basic working example: http://jsfiddle.net/G9z5M/(see updates below).
这是一个基本的工作示例：http: //jsfiddle.net/G9z5M/（请参阅下面的更新）。
You can play around with it using various techniques:
您可以使用各种技术来玩弄它：
/* Wraps normally, on whitespace */
p.words {
word-wrap: normal;
}
/* Hides non-wrapped letters */
p.hidden {
overflow: hidden;
}
/* Outputs a single line, doesn't wrap at all */
p.nowrap {
white-space: nowrap;
}?
See updated fiddle: http://jsfiddle.net/G9z5M/1/
查看更新的小提琴：http: //jsfiddle.net/G9z5M/1/
回答by Gabriele Petrioli
Normaly pelements are block so the widthis respected, and it should wrap at 10 pixels.
Normalyp元素是块，因此width受到尊重，它应该以 10 像素换行。
See http://jsfiddle.net/ejLmu/
If it does not work for you it means that you have some css rules that override the default settings. You either have set display:inline(in which case the width is not respected), or a white-space:nowrap;(which disables the text-wrapping).
如果它对您不起作用，则意味着您有一些覆盖默认设置的 css 规则。您要么设置了display:inline（在这种情况下不考虑宽度），要么设置了white-space:nowrap;（禁用文本换行）。
回答by Kvvaradha
For me it worked
对我来说它有效
white-space: initial;
May be it helps to someone else.
可能对其他人有帮助。
回答by myHyman
You should use
你应该使用
style="width:10px; display: block;"
回答by llange
I am not sur I do understand your question but with CSS you shoudl try :
我不明白你的问题，但你应该尝试使用 CSS：
word-break: break-all; // normal; // keep-all;
And if you want to hide extra content :
如果你想隐藏额外的内容：
overflow: hidden;
