Html 在 URL 中强制换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4326111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force a line break in a URL
提问by WNRosenberg
I've got a Twitter feed on my blog. It's working great, but there's an issue with long URLs in tweets. Long URLs break the layout by extending past the width of the container.
我的博客上有一个 Twitter 提要。它运行良好，但推文中的长 URL 存在问题。长 URL 会超出容器的宽度来破坏布局。
My code looks like this:
我的代码如下所示：
<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>
The blogger.js script contains the callback function which takes the data from the Twitter request and populates <li>elements to a predefined <ul>.
blogger.js 脚本包含回调函数，该函数从 Twitter 请求中获取数据并将<li>元素填充到预定义的<ul>.
I'm using the following CSS to automatically break the line (for browsers that support it):
我正在使用以下 CSS 自动断行（对于支持它的浏览器）：
#twitter_update_list li span a {
word-wrap: break-word;
}
I know about the <wbr>tag and was trying to use it with a jquery function that looked like this:
我知道这个<wbr>标签，并试图将它与一个看起来像这样的 jquery 函数一起使用：
$(document).ready(function(){
$("#twitter_update_list li span a").each(function(){
// a replaceAll string prototype was used here to replace "/" with "<wbr>/"
});
});
However when I tried using that snippet, it would cause IE to stop responding and that's no good.
但是，当我尝试使用该代码段时，它会导致 IE 停止响应，这是不好的。
I'm looking for a block of code I can just drop in that will fix the line break issue (by adding a line break to long URLs). Firefox and Chrome are working properly, but IE7 and IE8 need something more. (I don't care about IE6.)
我正在寻找一个我可以插入的代码块，它可以解决换行符问题（通过向长 URL 添加换行符）。Firefox 和 Chrome 运行正常，但 IE7 和 IE8 需要更多功能。（我不在乎 IE6。）
采纳答案by Nacho
Try playing with the white-spaceCSS property.
尝试使用white-spaceCSS 属性。
Check this link for more info: http://perishablepress.com/press/2010/06/01/wrapping-content/
查看此链接了解更多信息：http: //perishablepress.com/press/2010/06/01/wrapping-content/
回答by Charlie Escoboza Garcia
You can try using: word-break: break-all;
您可以尝试使用： 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>Just be sure of applying this only to the link. Otherwise, all other words will break too. :)
请确保仅将其应用于链接。否则，所有其他词也会失效。:)
回答by MikeNGarrett
I believe what you're looking for are soft hyphens. This was covered by ALA a while back.
我相信你正在寻找的是软连字符。不久前，ALA 对此进行了报道。
回答by Terre Porter
I know this is old post but since I ended up here with a related google search - someone else might also.
我知道这是旧帖子，但因为我最终在这里进行了相关的谷歌搜索 - 其他人也可能。
I needed to make a long url breakable, and since wasn't usable for my site (i.e not in html5 standards, and ie8 seems to ignore it)
我需要使一个长 url 可破坏，因为它不能用于我的网站（即不在 html5 标准中，而 ie8 似乎忽略了它）
<style>.wbr { display: inline-block; width: 0px;}</style>
Since i generated the url I was able to insert <span class="wbr"> </span>before the slashes.
由于我生成了 url，因此我可以<span class="wbr"> </span>在斜杠之前插入。
So I ended up with :
所以我结束了：
www.example.com<span class="wbr"> </span>/somepath<span class="wbr"> </span>/blah.php
which looks normal in the browser but allows from word wraping at the / marks
在浏览器中看起来正常但允许在 / 标记处换行
www.example.com/somepath/blah.php
Hope that helps the next person who visits
希望能帮助下一个访问的人
