CSS 文本超出包含 div 的范围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25033382/
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 goes outside containing div
提问by Blake
I have this codepen here, shouldn't the text goes to new line when it reaches the right border of div?
我这里有这个代码笔，当文本到达 div 的右边界时，文本不应该转到新行吗？
html:
html：
<div class="test">
<p>dfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodj</p>
</div>
css:
css：
div.test{
width:400px;
height:800px;
border-style: solid;
border-color: red;
margin:1px; padding:1px;
}
回答by amol
Use word-wrap:break-word
用 word-wrap:break-word
div.test{
width:400px;
height:800px;
border-style: solid;
border-color: red;
margin:1px; padding:1px;
word-wrap:break-word;
}
回答by Elad Shechter
Live Example http://codepen.io/elad2412/pen/LAhJw
现场示例 http://codepen.io/elad2412/pen/LAhJw
div.test {word-break:break-all;}
回答by Josh Harris
I had this same issue, word break didn't look too pretty for me - so I found applying the below CSS to the container worked:
我有同样的问题，分词对我来说看起来不太漂亮 - 所以我发现将下面的 CSS 应用于容器工作：
text-overflow: ellipsis;
overflow: hidden;
ellipsis has good browser support too, read more about ellipsis here
省略号也有很好的浏览器支持，在这里阅读更多关于省略号的信息
回答by Dwipa Arantha
Because the text doesn't have any space, so it won't create a new line.
因为文本没有任何空格，所以它不会创建新行。
Try to put:
尝试放置：
[space]/( )/( )
[space]/( )/( )
For example, I changed my text from:
例如，我将文本从：
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
into:
进入：
xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx
It will create its own new line.
它将创建自己的新行。
回答by Sam
You can do width:auto;, but if you want specific width:400px;you can use word-wrap:break-wordor word-wrap:break-all;
你可以做 width:auto;，但如果你想要具体的width:400px;你可以使用word-wrap:break-word或word-wrap:break-all;
回答by Dennis
in my case it turned out to be this:
就我而言，结果是这样的：
something something
counts as a single long word and hence went outside the div
算作一个长字，因此在 div 之外
Fixed it by doing
通过做修复它
something something
