在斜杠 (/) 上打断 HTML 文本的最佳方法是什么？答案

【问题标题】：What is the best way to break HTML text on slashes (/)?在斜杠 (/) 上打断 HTML 文本的最佳方法是什么？
【发布时间】：2012-01-01 11:19:57
【问题描述】：

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

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

在 CSS 中强制对斜杠 (/) 和破折号 (-) 进行换行的最佳方法是什么（希望如此）？

它应该适用于 IE7+、Chrome、Firefox 和 Safari。

在 Rails 3 和 jQuery 中工作。

【问题讨论】：

这也可以通过使用 jQuery 来完成。请参阅jsfiddle.net/EkfUR 和重复问题stackoverflow.com/questions/15159278/…

【解决方案1】：

你可以像这样使用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

【讨论】：

除非我误解了这个问题，否则这在 Chrome 21 中似乎不起作用。我看到中断发生在最后一个适合的字符而不是斜杠
是的，这个解决方案绝对不会在斜线处中断。
每个浏览器的实现都不同。即使使用最新的几个版本的 Chrome 也会导致不同的行为。如果你想要一些肯定会在斜杠上中断的东西，那么我认为你需要使用 JavaScript 并将 / 字符替换为 /<br /> 或其他东西。我相信这个答案被接受了，因为它解决了 O.P.s 问题，可能不完全像措辞那样，但它提供了一个修复。
@Ghan 我为我做了，我正在使用 Chrome 44.0。 JSFiddle 是否没有为您正确破坏 URL？
嘿@Jasper，不知道为什么，但这里的解决方案对我有用：kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css

【解决方案2】：

虽然 css word-wrap: break-word; 确实有效，但它的实现在不同的浏览器中是不同的。

如果你可以控制内容并且想要精确的断点，你可以插入

我有一个庞大的企业用户群，他们仍然必须使用 IE8，所以当我遇到这个问题时，我在服务器端代码中使用了 C# someString.Replace("/", "/&#8203;")。

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

【讨论】：