CSS wordwrap 一个很长的字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/856307/
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
wordwrap a very long string
提问by Peter Craig
How can you display a long string, website address, word or set of symbols with automatic line breaks to keep a div width? I guess a wordwrap of sorts. Usually adding a space works but is there a CSS solution such as word-wrap?
如何使用自动换行符显示长字符串、网站地址、单词或符号集以保持 div 宽度？我想是某种自动换行。通常添加一个空格是可行的，但是否有诸如自动换行之类的 CSS 解决方案？
For example it (very nastily) overlaps divs, forces horizontal scrolling etc. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
例如，它（非常讨厌）与 div 重叠，强制水平滚动等。
What can I add to the above string to fit it neatly within a few lines in a div or within the browser window?
我可以在上面的字符串中添加什么以使其在 div 或浏览器窗口中的几行内整齐地适应？
回答by Paolo Bergantino
This question has been asked here before:
这个问题以前在这里被问过：
- Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)
- word wrap in css / js
- CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML
- CSS overflow with long URL
- 谁解决了 long-word-breaks-my-div 问题？（提示：不是stackoverflow）
- 在 css / js 中自动换行
- CSS：如何强制将长字符串（没有任何空格）包装在 XUL 和/或 HTML 中
- 长 URL 的 CSS 溢出
Long story short:
长话短说：
As far as CSS solutions go you have: overflow: scroll;to force the element to show scrollbars and overflow:hidden;to just cut off any extra text. There is text-overflow:ellipsis;and word-wrap: break-word;but they are IE only (break-wordis in the CSS3 draft, however, so it will be the solution to this 5 years from now).
就 CSS 解决方案而言，您必须：overflow: scroll;强制元素显示滚动条并overflow:hidden;切断任何额外的文本。有text-overflow:ellipsis;，word-wrap: break-word;但它们只是 IE（break-word在 CSS3 草案中，但是，所以这将是 5 年后的解决方案）。
Bottom line is that if it is very important for you to stop this from happening with wrapping the text over to the next line the only reasonable solution is to inject ­(soft hyphen), <wbr>(word break tag), or ​(zero-width space, same effect as ­minus hyphen) in your string server side. If you don't mind Javascript, however, there is the hyphenatorwhich seems to be pretty solid.
最重要的是，如果通过将文本换行到下一行来阻止这种情况发生非常重要，那么唯一合理的解决方案是注入 ­（软连字符）、<wbr>（分词标记）或​（零宽度空格，与­减连字符相同的效果）在您的字符串服务器端。但是，如果您不介意 Javascript，那么连字符似乎非常可靠。
回答by Kevin Rapley
word-wrap: break-word;is available in IE7+, FF 3.5 and Webkit enabled browsers (Safari/Chrome etc). To handle IE6 you will also need to declare word-wrap: break-all;
word-wrap: break-word;在 IE7+、FF 3.5 和支持 Webkit 的浏览器（Safari/Chrome 等）中可用。要处理 IE6，您还需要声明word-wrap: break-all;
If FF 2.0 is not on your browser matrix then using these is a viable solution. Unfortunately it does not hyphenate the preceding line where the word is broken which is a typographical nightmare. I would suggest using the Hyphenator as suggested by Paolo which is unobtrusive JavaScript. The fall-back for non JavaScript enabled users will then be the broken word without hyphens. I can live with that for the time being. This problem will most likely arise in a CMS, where the web designer does not have control over what content will be entered or where line-breaks and soft-hyphens may be implemented.
如果 FF 2.0 不在您的浏览器矩阵中，那么使用这些是一个可行的解决方案。不幸的是，它没有连字符断字的前一行，这是一个排版的噩梦。我建议按照 Paolo 的建议使用 Hyphenator，它是一种不显眼的 JavaScript。非 JavaScript 启用用户的后备将是没有连字符的坏词。我暂时可以忍受。这个问题最有可能出现在 CMS 中，Web 设计人员无法控制输入的内容或可以实现换行和软连字符的位置。
I have taken a look at the W3 specificationwhere hyphenation in CSS3 is discussed. Unfortunately it appears there are a few suggestions but nothing concrete yet. It appears the browser vendors are yet to implement anything either yet. I have checked both Mozilla and Webkit for proprietory code but there is no sign of any.
我查看了W3 规范，其中讨论了 CSS3 中的连字符。不幸的是，似乎有一些建议，但还没有具体的内容。浏览器供应商似乎还没有实现任何东西。我已经检查了 Mozilla 和 Webkit 的专有代码，但没有任何迹象。
回答by Sam Jones
word-break:break-allworks a treat
word-break:break-all工作款待
回答by adriatiq
Just mentioned this over herebut probably more relevant to this question. The best property shortly will be overflow-wrap. and the best value if it gets implemented would be:
刚刚在这里提到了这一点，但可能与这个问题更相关。最好的属性很快将是溢出包装。如果它得到实施，最好的价值是：
* {
overflow-wrap:hyphenate.
}
Doesen't seem to be supported in any way just yet at the time of writing on the iphone or firefox, and overflow-wrap:hyphenate isn't even in the working draft.
在 iphone 或 firefox 上撰写本文时，似乎还没有以任何方式支持，并且 overflow-wrap:hyphenate 甚至不在工作草案中。
in the meantime i'd use:
同时我会使用：
p {
word-wrap: break-word;
-moz-hyphens:auto;
-webkit-hyphens:auto;
-o-hyphens:auto;
hyphens:auto;
}
回答by Roman Losev
I use the code for preventing all long strings, urls and so on..
我使用代码来防止所有长字符串、网址等..
-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;
回答by jamiethepiper
display: block; overflow: hidden; text-overflow: ellipsis; width: 200px; // or whatever is best for you
回答by Chad Birch
Hopefully someday we'll get access to the word-wrapproperty in CSS3: Force Wrapping: the 'word-wrap' property.
希望有一天我们能访问word-wrapCSS3 中的属性：Force Wrapping: the 'word-wrap' property。
Someday...
总有一天...
回答by nikc
Normally Cells will do this naturally, but you could force this behavior on a div with:
通常 Cells 会自然地做到这一点，但你可以在 div 上强制这种行为：
div {
width: 950px;
word-wrap: break-word;
display: table-cell;
}
回答by Shraddha Mohite
Always specify line-height property - if you don't specify, it might cause the failure of your word-break: break-all;property.
始终指定 line-height 属性 - 如果不指定，可能会导致您的word-break: break-all;属性失败。
回答by SDMulroy
It seems that this does the trick for latest Chrome:
这似乎对最新的 Chrome 有用：
[the element],
[the element] * {
word-wrap: break-word;
white-space: pre;
}
I have not checked any browsers but Chrome.
除了Chrome，我没有检查过任何浏览器。
