CSS 换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2738367/
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
CSS line wrapping
提问by Mic
Given a block container
给定一个块容器
<div>
this is a very long string which contains a bunch of characters that I want to break at container edges.
</div>
are there any css properties I can set to force it to break when it reaches the container width, regardless of the contents of the string, for example a break like:
是否有任何 css 属性我可以设置以在它达到容器宽度时强制它中断，而不管字符串的内容如何，例如像这样的中断：
this is a ve
ry long stri
ng which ...
is pretty much what I want. Right now, it seems to always prefer to break at whitespace characters or other special characters (such as /).
几乎是我想要的。现在，它似乎总是更喜欢在空白字符或其他特殊字符（例如 /）处中断。
采纳答案by Jamie Dixon
There's a CSS3 property called word-breakthat may be of some use to you in future.
有一个名为 CSS3 的属性word-break，将来可能对您有用。
More information is available here: http://www.css3.com/css-word-break/
更多信息请访问：http: //www.css3.com/css-word-break/
The break-allvalue looks to do the thing you're asking for:
该break-all值看起来做你要求的事：
Useful where content contains a majority of Asian character set content, to which this value behaves like ‘normal'. Non-Asian character set content may be arbitrarily broken across lines.
在内容包含大部分亚洲字符集内容的情况下很有用，此值的行为类似于“正常”。非亚洲字符集内容可以任意跨行中断。
As for more supported versions of CSS, I don't believe there's a way you can do this.
至于更多受支持的 CSS 版本，我认为您没有办法做到这一点。
回答by Galen
Try this
尝试这个
<style type="text/css">
div {
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
</style>
<div style="width:200px">
adsjflk;asjfl;kasdjfl;kasdjfl;kasdjf;lkasdjf;lkasdjf;lkasjdf;lkajsd;lkadfjs;l
</div>
回答by Amit Rai Sharma
Alternative way achieve the same by enclosing the div in a parent div and setting the width of the parent div. Though it might not be the ideal solution.
另一种方法是通过将 div 包含在父 div 中并设置父 div 的宽度来实现相同的效果。虽然它可能不是理想的解决方案。
<div style="width:50px">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>
