IE长链接错误中断答案

【问题标题】：IE long link wrong breakIE长链接错误中断
【发布时间】：2012-05-16 23:02:32
【问题描述】：

有谁知道如何防止 IE(7) 错误的破坏网址？

问题是 IE 在单词中破坏了 url，例如：

http://stackoverflow.com/que
stions/

【问题讨论】：

【解决方案1】：

您是在告诉浏览器在单词中间打断，只需从您的 CSS 中删除 word-wrap: break-word;。

【讨论】：

这无助于解决 >long
为什么不呢？我在 Mac 上，所以我无法测试 IE，但在 Chrome 中，只需删除它会使链接保持在一行中（溢出 div 的右边框）请参阅jsfiddle.net/uQcj5/5。为防止溢出并剪切 div 的内容，请添加 overflow: hidden;。
如果您希望浏览器找出链接中某个单词的开始/结束位置，那就别管它了。整个链接被视为一个单词。
所以我无法看到整个链接，这不是解决方案。
好吧，你可以考虑用 javascript 和正则表达式在一些斜线后添加一个<br>，但我认为仅仅为了获得 IE7 兼容性太麻烦了。关于 Firefox：可能是巧合，让 div 变小，FF 也会破坏它：jsfiddle.net/uQcj5/6

【解决方案2】：

var str = 'http://stackoverflow.com/questions/10620008/ie-long-link-wrong-break'
str = str.replace(/\//g, '/&#8203;');

【讨论】：

【解决方案3】：

正确的 CSS 应该是：

white-space: nowrap;

编辑

好吧，没想到你不想跳出<div>。好吧，这对你来说是一个肮脏的把戏：在你确实想要中断的地方添加&#8203;字符。

这个&#8203; 字符是zero width space。

【讨论】：

【解决方案4】：

删除word-wrap: break-word，添加规则wbr:after { content: "\00200B"; }，并在每个允许的断点处插入<wbr>，例如

<div><a href="#">http://stackoverflow.<wbr>com/<wbr>questions</a></div>

对此（以及一般的换行问题）的解释很长，请参阅http://www.cs.tut.fi/~jkorpela/html/nobr.html

请注意，如果 URL 包含连字符“-”，则需要采取额外措施来防止浏览器在连字符之前或之后拆分字符串。

如果可能，请不要在文档内容中使用 URL。使用链接文本； URL 主要用作href 和其他属性值，而不是可见内容。大多数情况下，只有当您的文档是关于 URL 或 URL 是真正相关内容的其他技术问题时，您才应该在内容中包含 URL。

【讨论】：