我的博客上有一个 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&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。)
最佳答案
您可以尝试使用: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>
请确保仅将此应用于链接。否则,所有其他词也会中断。 :)
关于html - 在 URL 中强制换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4326111/