该行末尾只有换行/自动换行URL

Question

我有一个包含URL的div。我希望URL延伸到行尾，然后仅在行尾包裹到下一行。

例如，在FF9中使用'word-wrap：break-word'会发生这种情况：

http://www.somewebsiteaddressthathopefullydoesntexist.com
/aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa

但我希望它看起来更像这个

http://www.somewebsiteaddressthathopefullydoesntexist.com/aaaa_aaaa_aaaa_aaaa_
aaaa_aaaa_aaaa_aaaa_aaaa_aaaa

Answer 1

您可以尝试<wbr>（wordbreak）标记。 http://www.w3schools.com/html5/tag_wbr.asp。
（如果没有剩余空间，它只会在那里（并且只在那里）中断，它与<br />不同

Answer 2

关于标点符号的行为，例如/（斜杠），浏览器之间略有不同。见this JSFiddle demo。在Firefox 10.0.2中，它将在solidus之前中断，而Opera则会在之后中断。如果您使用word-wrap:break-word;，则该行的其余部分将正确中断。除非有一个nobreak斜杠实体，否则你将找不到跨浏览器解决方案。另请参阅Wiki: Slash (punctuation)：

  

当引用诗歌，剧本或标题中的多行时，斜杠也用于表示换行符。

歌剧： 火狐：

Answer 3

您是否测试了overflow css选项 - link？

Answer 4

刚想出一个解决方案，在每个角色之间放置<wbr>：

$myURL = "http://www.somewebsiteaddressthathopefullydoesntexist.com/aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa_aaaa";

for ($i = 0; $i < strlen($myURL); $i+=6){
    $myURL = substr($myURL,0,$i)."<wbr>".substr($myURL, $i);
}