在斜杠（/）上打破HTML文本的最佳方法是什么？

Question

我有一个360px宽的HTML表，效果很好。挑战在于文本中有时会显示http://this/is/a/really-really-really-really-really/long/url的网址。这会导致表格水平展开，并在底部显示滚动条。

我认为overflow:hidden不起作用，因为文本的一半会被隐藏。

在CSS中强制打破斜线（/）和短划线（ - ）的最佳方法是什么？（希望如此）？

它适用于IE7 +，Chrome，Firefox和Safari。

使用Rails 3和jQuery。

Answer 1

虽然css word-wrap: break-word;确实有效，但它的实现方式因浏览器而异。

如果您可以控制内容并想要准确的断点，则可以插入

• 一个<wbr>分词符（除了IE8 CanIUse.com之外的所有主流浏览器都支持）;
• ​零宽度空间（U + 200B） - IE中的丑陋＆lt; = 6
• ­软连字符 - 当然这会在断开时添加一个连字符，这并非总是如此。

我有一个庞大的企业用户群仍然需要使用IE8，所以当我遇到这个问题时，我在服务器端代码中使用了C＃someString.Replace("/", "/​")。

问题：如果您在电子邮件地址中插入零宽度空间，当用户复制并粘贴到其电子邮件客户端时，该空间也会被复制，电子邮件将失败，用户无法查看原因（空间是零宽度......）

参考

• Stack Overflow
• http://www.quirksmode.org/oddsandends/wbr.html - 示例

进一步阅读

• https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/（2012年3月）
• https://css-tricks.com/almanac/properties/w/word-break/（2012年9月）
• https://css-tricks.com/almanac/properties/h/hyphenate/（2011年9月）

Answer 2

你可以这样使用word-wrap : break-word;：

<div>http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg</div>

div {
    width : 50px;
    border : 1px solid #000;
    word-wrap : break-word;
}

我测试了这个：I.E。 6 / 7/8，Firefox 7，Opera 11，Safari 5，Chrome 15

这是一个jsfiddle：http://jsfiddle.net/p4SxG/