CSS 文字不留在div内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19435967/
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 staying inside div
提问by user2820604
I have a div that text will just not stay in and I have no idea why, I have never run into this issue before Im hoping some people can help me out, heres my code:
我有一个 div 文本不会留在里面，我不知道为什么，在我希望有人能帮助我之前我从未遇到过这个问题，这是我的代码：
HTML:
HTML：
#toronto-content {
position: relative;
z-index: 98;
height: 100%;
width: 700px;
background-color: #0A0A0A;
color: #FFF;
}<div id="toronto-content">
Interactively pursue long-term high-impact vortals and distributed systems. Competently streamline team driven testing procedures without leading-edge intellectual capital. Energistically engage market-driven catalysts for change via client-centered technologies.
Compellingly architect long-term high-impact intellectual capital and resource-leveling interfaces. Phosfluorescently initiate market positioning supply chains with stand-alone processes. Collaboratively generate leading-edge services for synergistic
e-markets. Conveniently syndicate bleeding-edge resources whereas equity invested scenarios. Collaboratively parallel task backward-compatible deliverables and business relationships. Assertively implement turnkey niche markets for technically sound
human capital. Collaboratively integrate pandemic niche markets with corporate action items. Quickly utilize timely paradigms after best-of-breed infomediaries. Appropriately drive future-proof initiatives via standards compliant opportunities. Uniquely
coordinate 24/365 mindshare vis-a-vis top-line synergy. Phosfluorescently benchmark one-to-one mindshare with high-payoff best practices. Distinctively supply principle-centered relationships whereas revolutionary relationships.
</div>if you want to check out the full site its here: http://lasociete.ca/new/
如果您想查看完整网站，请点击此处：http: //lasociete.ca/new/
回答by dezman
This will solve your issue:
这将解决您的问题：
#toronto-content {
white-space: normal;
}
But I would consider putting your text into a <p>or <span>tag.
但我会考虑将您的文本放入<p>或<span>标记中。
回答by LasagnaAndroid
That's because the amount of text is larger than the div.
I recommend adding overflow:overlayto your style, this will create a vertical scroll bar right next to the content.
那是因为文本量大于div.
我建议添加overflow:overlay到您的样式中，这将在内容旁边创建一个垂直滚动条。
If you add overflow:scrollit will create a horizontal scroll-bar even if there's no need for one.
如果您添加overflow:scroll它，即使不需要，它也会创建一个水平滚动条。
If that's not what you want, you should either add pages when there's too much content (called "pagination") or make a custom vertical scrollbar with Javascript or jQuery.
如果这不是您想要的，您应该在内容过多时添加页面（称为“分页”）或使用 Javascript 或 jQuery 制作自定义垂直滚动条。
回答by Zvi Redler
Add this
添加这个
#toronto-content {
white-space: normal;
overflow: hidden;
}
