如何在 HTML 中自动换行文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1147877/
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
How to word wrap text in HTML?
提问by Satya Kalluri
How can text like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaawhich exceeds the width of a div(say 200px) be wrapped?
如何包装aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa超过div（例如200px）宽度的文本？
I am open to any kind of solution such as CSS, jQuery, etc.
我对任何类型的解决方案持开放态度，例如 CSS、jQuery 等。
回答by Alan Haggai Alavi
Try this:
尝试这个：
div {
width: 200px;
word-wrap: break-word;
}
回答by lukaserat
On bootstrap 3, make sure the white-space is not set as 'nowrap'.
在引导程序 3 上，确保空白未设置为“nowrap”。
div {
width: 200px;
word-break: break-all;
white-space: normal;
}
回答by Kim Stebel
You can use a soft hyphen like so:
您可以像这样使用软连字符：
aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa
This will appear as
这将显示为
aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa
if the containing box isn't big enough, or as
如果包含框不够大，或者作为
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
if it is.
如果是。
回答by Orr Siloni
div {
// set a width
word-wrap: break-word
}
The 'word-wrap' solution only works in IE and browsers supporting CSS3.
' word-wrap' 解决方案仅适用于 IE 和支持CSS3.
The best cross browser solution is to use your server side language (php or whatever) to locate long strings and place inside them in regular intervals the html entity ​This entity breaks the long words nicely, and works on all browsers.
最好的跨浏览器解决方案是使用您的服务器端语言（php 或其他语言）来定位长字符串并定期将 html 实体放入其中。​该实体很好地打破了长词，并适用于所有浏览器。
e.g.
例如
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
回答by Kyle Dearle
The only one that works across IE, Firefox, chrome, safari and opera if there are no spaces in the word (such as a long URL) is:
如果单词中没有空格（例如长 URL），则唯一可以在 IE、Firefox、chrome、safari 和opera 上运行的方法是：
div{
width: 200px;
word-break: break-all;
}
I found this to be bullet-proof.
我发现这是防弹的。
回答by Amol
This worked for me
这对我有用
word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
回答by Andrew Marais
Another option is also using:
另一种选择也是使用：
div
{
white-space: pre-line;
}
This will set all your div elements in all browsers that support CSS1(which is pretty much all common browsers as far back as IE 8)
这将在所有支持CSS1 的浏览器中设置所有 div 元素（这几乎是所有常见的浏览器，最早可以追溯到 IE 8）
回答by Timeless
.wrap
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
回答by Swapnil Godambe
Add this CSS to the paragraph.
将此 CSS 添加到段落中。
style="width:420px;
min-height:15px;
height:auto!important;
color:#666; padding: 1%;
font-size: 14px;
font-weight: normal;
word-wrap: break-word;
text-align: left"
回答by Juraj Guni?
Example from CSS Tricks:
CSS 技巧示例：
div {
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
More examples here.
更多例子在这里。
