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

尝试使用white-space CSS属性。

点击此链接了解详情：http://perishablepress.com/press/2010/06/01/wrapping-content/

Answer 2

您可以尝试使用：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 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

在浏览器中看起来很正常，但允许在/ marks

处进行单词包装

www.example.com/somepath/blah.php

希望能帮助下一个访问的人

强制URL中的换行符

4 个答案: