Html 文本未包装在 p 标签中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14477156/
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
Text not wrapping in p tag
提问by Jon Hudson
I have two floated divs, side by side, with p tags inside. The text within the p tags does not wrap and just overflows the container, as you can see in the text under the images:
我有两个浮动的 div，并排，里面有 p 标签。p 标签中的文本不会换行，只会溢出容器，正如您在图像下方的文本中所见：
My HTML looks like so:
我的 HTML 看起来像这样：
<div class="submenu">
<h3>Destinations in Europe</h3>
<ul>
<li><a href="#">dfgdgdgfgdg</a></li>
<li><a href="#">dfgdgdgfgdg</a></li>
<li><a href="#">dfgdgdgfgdg</a></li>
<li><a href="#">dfgdgdgfgdg</a></li>
</ul>
<h3>Features</h3>
<div>
<img src="/assets/images/o/menu/city-feat-one.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
</p>
</div>
<div>
<img src="/assets/images/o/menu/city-feat-two.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
</p>
</div>
</div>
My CSS:
我的CSS：
#rb-menu-com li .submenu > div {
width:48%;
float:left;
position: relative;
}
#rb-menu-com li .submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative;
}
#rb-menu-com li .submenu div img {
border:1px solid #fff;
}
Has anyone experienced this before? I haven't!! Driving me mad!
有谁之前经历过这个吗？我没有！！气死我了！
回答by Praveen Kumar Purushothaman
Give this style to the <p>tag.
将此样式赋予<p>标签。
p {
word-break: break-all;
white-space: normal;
}
回答by Quentin
Word wrapping only occurs when there is a word break.
自动换行仅在出现分词时发生。
If you have a "word" that is as long as that, then there is no place for it to break.
如果你有一个这么长的“词”，那么它就没有地方可以打破。
The proper solution is to write real content and not nonsense strings of characters. If you are using user generated content, then add a check for exceptionally long words and disallow them (or cut out part of them for URLs while keeping the whole thing in a link).
正确的解决方案是编写真实的内容，而不是无意义的字符串。如果您使用的是用户生成的内容，请检查是否存在过长的单词并禁止使用它们（或为 URL 剪掉一部分内容，同时将整个内容保留在链接中）。
Alternatively, you can use the word-breakCSS propertyto tell the browser to line break in the middle of words.
或者，您可以使用word-breakCSS 属性告诉浏览器在单词中间换行。
p { word-break: break-all }
(Note browser support).
（注意浏览器支持）。
Alternatively, you can use overflowto truncate the text if it won't fit in the container.
或者，overflow如果文本不适合容器，您可以使用它来截断文本。
回答by matthewsheets
To anyone still struggling, be sure to check and see if you've set a line-height value on the font in question: it could be overriding the word wrap.
对于仍在苦苦挣扎的任何人，请务必检查并查看您是否在相关字体上设置了行高值：它可能会覆盖自动换行。
回答by Sowmya
That is because you have continuous text, means single long word without space. To break it add word-break: break-all;
那是因为您有连续的文本，意味着没有空格的单个长单词。要打破它添加word-break: break-all;
.submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative; word-break: break-all; background:red
}
回答by user1164594
This is not an answer to the question but as I found this page while looking to an answer to a problem that I had, I want to mention the solution that I found as it cost me a lot of time. In the hope this will be useful to others:
这不是问题的答案，但是当我在寻找我遇到的问题的答案时找到了这个页面，我想提一下我找到的解决方案，因为它花费了我很多时间。希望这对其他人有用：
The problem was that text in a <p> tag would not fold in the div. Eventually, I opened the inspector and noticed a 'no breaking space entity' between all the words. My editor, vi, was just showing normal blank spaces (some invisible chr, I don't know what) but I had copied pasted the text from a PDF document. The solution was to copy a blank space from within vi and replace it with a blank space. ie. :%s/ / /g where the blank to be replaced was copied from the offending text. Problem solved.
问题是 <p> 标签中的文本不会在 div 中折叠。最终，我打开检查器并注意到所有单词之间有一个“无中断空间实体”。我的编辑器 vi 只显示正常的空格（一些不可见的字符，我不知道是什么），但我已经从 PDF 文档中复制粘贴了文本。解决方案是从 vi 中复制一个空格并将其替换为一个空格。IE。:%s//g 其中要替换的空白是从有问题的文本中复制而来的。问题解决了。
回答by Kevin Oonk
You can use word-wrap to break words or a continuous string of characters if it doesn't fit on a line in a container.
如果它不适合容器中的一行，您可以使用自动换行来中断单词或连续字符串。
word-wrap: break-word;
this will keep breaking lines at appropriate break points unless a single string of characters doesn't fit on a line, in that case it will break.
这将在适当的断点处保持断行，除非单个字符串不适合一行，在这种情况下它将中断。
回答by Developer_D
EASY
简单
p{
word-wrap: break-word;
}
回答by Mark
Adding width: 100%;to the offending p element solved the problem for me. I don't know why it works.
添加width: 100%;到有问题的 p 元素为我解决了这个问题。我不知道它为什么有效。
回答by Hammad Khan
The solutions is in fact
解决办法其实是
p{
white-space:normal;
}
You can change the break behaviors by modifying, word-break property
您可以通过修改 word-break 属性来更改中断行为
p{
word-break: break-all; // will break at end of line
}
break-all: Will break the string at the very end, breaking at the last word word-break: is more of pretty brake, will break nicely for example at ? point normal: same as word-break
break-all：将在最后断开字符串，在最后一个单词处断开 word-break：更多的是漂亮的刹车，例如在 ? 点正常：与断字相同
回答by Ross Grambo
For others that find themselves here, the css I was looking for was
对于发现自己在这里的其他人，我正在寻找的 css 是
overflow-wrap: break-word;
Which will only break a word if it needs to (the length of the single word is greater than the width of the p), unlike word-break: break-allwhich can break the last word of every line.
哪个只会在需要时断开一个单词（单个单词的长度大于 p 的宽度），不像word-break: break-all它可以断开每一行的最后一个单词。
