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

Question

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

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

在 CSS 中强制断开斜线 (/) 和破折号 (-) 上的线的最佳方法是什么(希望如此)？

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

使用 Rails 3 和 jQuery。

Answer 1

tl;博士; (2022 年 4 月编辑)

使用 <wbr>每个 / 之前的分词机会元素.请参阅下面进一步阅读中的第一个链接。

详情(2014年原创)

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

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

• 一个<wbr>分词符(除 IE8 外所有主流浏览器均支持 CanIUse.com )；
• ​零宽度空间 (U+200B) - 在 IE 中很丑<=6
• ­软连字符 - 虽然这当然会在断开时添加一个连字符，但这并不总是需要的。

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

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

引用资料

• 堆栈溢出
• http://www.quirksmode.org/oddsandends/wbr.html - 举例说明

进一步阅读

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr#example
• https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
• https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
• 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 月)