html - 在 URL 中强制换行

Question

我的博客上有一个 Twitter 提要。它运行良好，但推文中的长 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>/"
    });
});

但是，当我尝试使用该代码段时，它会导致 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>

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