强制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>

请务必将此仅应用于链接.否则,所有其他的话也会破裂.:)

Answer 2

尝试使用white-spaceCSS属性.

有关详细信息,请访问此链接:http://perishablepress.com/press/2010/06/01/wrapping-content/