CSS 文本未环绕在 div 元素内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23763482/
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 inside a div element
提问by Vasileios Tsakalis
I am experiencing a problem that never happened before and seems really unprecedented, some text is not wrapping inside a div.
我遇到了一个以前从未发生过的问题，而且似乎是前所未有的，有些文本没有包含在 div 中。
In this link is a sample of my html code:
在此链接中是我的 html 代码示例：
<div id="calendar_container">
<div id="events_container">
<div class="event_block">
<div class="title">
lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem
</div>
</div>
</div>
</div>
Any help??
有什么帮助吗？？
回答by TimmyD
I found this helped where my words were breaking part way through the word in a WooThemes Testimonial plugin.
我发现这有助于我的话在 WooThemes Testimonial 插件中打破了这个词。
.testimonials-text {
white-space: normal;
}
play with it here http://nortronics.com.au/recomendations/
在这里玩它http://nortronics.com.au/recomendations/
<blockquote class="testimonials-text" itemprop="reviewBody">
<a href="http://www.jacobs.com/" class="avatar-link">
<img width="100" height="100" src="http://nortronics.com.au/wp-content/uploads/2015/11/SKM-100x100.jpg" class="avatar wp-post-image" alt="SKM Sinclair Knight Merz">
</a>
<p>Tim continues to provide high-level technical applications advice and support for a very challenging IP video application. He has shown he will go the extra mile to ensure all avenues are explored to identify an innovative and practical solution.<br>Tim manages to do this with a very helpful and professional attitude which is much appreciated.
</p>
</blockquote>
回答by j08691
That's because there are no spaces in that long string so it has to break out of its container. Add word-break:break-all;to your .title rules to force a break.
那是因为那个长字符串中没有空格，所以它必须脱离容器。添加word-break:break-all;到您的 .title 规则以强制中断。
#calendar_container > #events_container > .event_block > .title {
width:400px;
font-size:12px;
word-break:break-all;
}
回答by Friedrich
you can add this line: word-break:break-all;to your CSS-code
您可以将这一行添加word-break:break-all;到您的 CSS 代码中
回答by Matt Dalzell
The problem in the jsfiddle is that your dummy text is all one word. If you use your lorem ipsum given in the question, then the text wraps fine.
jsfiddle 中的问题是你的虚拟文本都是一个词。如果您使用问题中给出的 lorem ipsum，则文本可以很好地换行。
If you want large words to be broken mid-word and wrap around, add this to your .title css:
如果您希望大字在字中被打断并环绕，请将其添加到您的 .title css 中：
word-wrap: break-word;
回答by Fakeer
This may help a small percentage of people still scratching their heads. Text copied from clipboard into VSCode may have an invisible hard space character preventing wrapping. Check it with HTML inspector
这可能会帮助一小部分人仍然摸不着头脑。从剪贴板复制到 VSCode 的文本可能有一个不可见的硬空格字符，防止换行。使用 HTML 检查器检查它
回答by SteamDev
Might benefit you to be aware of another option, word-wrap: break-word;
了解另一种选择可能会让您受益， word-wrap: break-word;
The difference here is that words that can completely fit on 1 line will do that, vs. being forced to break simply because there is no more real estate on the line the word starts on.
这里的区别在于，可以完全适合 1 行的单词可以做到这一点，而不是仅仅因为单词开始的行上没有更多空间而被迫中断。
See the fiddle for an illustration http://jsfiddle.net/Jqkcp/
请参阅小提琴以获取说明http://jsfiddle.net/Jqkcp/
