在 URL 中强制换行

Question

我的博客上有 Twitter 提要。它工作得很好，但是推文中的长 URL 存在问题。长 URL 会超出容器的宽度，从而破坏布局。

我的代码如下所示：

<ul id="twitter_update_list">
    <!-- twitter feed -->
</ul>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&amp;count=3"></script>

blogger.js 脚本包含回调函数，该函数从 Twitter 请求中获取数据并将<li> 元素填充到预定义的<ul>。

我正在使用以下 CSS 来自动换行（对于支持它的浏览器）：

#twitter_update_list li span a {
    word-wrap: break-word;
}

我知道<wbr> 标记，并试图将它与如下所示的 jquery 函数一起使用：

$(document).ready(function(){
    $("#twitter_update_list li span a").each(function(){
        // a replaceAll string prototype was used here to replace "/" with "<wbr>/"
    });
});

但是，当我尝试使用该 sn-p 时，它会导致 IE 停止响应，这不好。

我正在寻找可以解决换行问题的代码块（通过向长 URL 添加换行符）。 Firefox 和 Chrome 运行正常，但 IE7 和 IE8 需要更多。 （我不关心IE6。）

Answer 1

您可以尝试使用：word-break: break-all;

div {
  background: lightblue;
  border: 1px solid #000;
  width: 200px;
  margin: 1em;
  padding: 1em;
}
.break {
  word-break: break-all;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae fugiat fuga fugit cum <a href="" class="break">http://www.ThisLongTextBreaksBecauseItHasWordBreak-BreakAll.com</a> facere mollitia repellat hic, officiis, consequatur quam ad cumque dolorem doloribus ex magni necessitatibus, nisi accusantium.</p>
  
  <p>Voluptatibus atque inventore <a href="">http://www.looooooooooooooooooooooooooooongURL.com</a> veritatis exercitationem nihil minus omnis, quisquam earum ipsum magnam. Animi ad autem quos rem provident minus officia vel beatae fugiat quasi, dignissimos
    sapiente sint quam voluptas repellat!</p>
</div>

请确保仅将其应用于链接。否则，所有其他单词也会中断。 :)

Answer 2

尝试使用white-space CSS 属性。

查看此链接了解更多信息：http://perishablepress.com/press/2010/06/01/wrapping-content/

Answer 3

我相信您正在寻找的是软连字符。不久前，ALA 对此进行了报道。

http://www.alistapart.com/articles/the-look-that-says-book/

Answer 4

我知道这是旧帖子，但由于我最终在这里进行了相关的谷歌搜索 - 其他人也可能这样做。

我需要制作一个可破坏的长网址，因为它不适用于我的网站（即不在 html5 标准中，ie8 似乎忽略了它）

<style>.wbr { display: inline-block; width: 0px;}</style>

由于我生成了网址，因此我可以在斜杠之前插入 <span class="wbr"> </span>。

所以我最终得到了：

www.example.com<span class="wbr">&nbsp;</span>/somepath<span class="wbr">&nbsp;</span>/blah.php

在浏览器中看起来很正常，但允许在 / 标记处换行

www.example.com/somepath/blah.php

希望对下一位访问的人有所帮助