在URL中強制換行

我在我的博客上收到了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腳本包含回調函數從微博請求獲取數據，並填充<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。）

來源

2010-12-01 Jazzerus

嘗試玩white-space的CSS屬性。

檢查此鏈接瞭解更多信息：http://perishablepress.com/press/2010/06/01/wrapping-content/

來源

2010-12-01 16:23:24 Nacho

其實，剛剛發現這個問題，幾乎完全是你的：http://stackoverflow.com/questions/1470810/wrapping-long-text-in-css – Nacho 2010-12-01 16:25:30

第一個鏈接是偉大的，但沒有一個屬性在IE8中工作。我決定在LI上使用overflow：hidden來解決IE8中的問題。 – Jazzerus 2010-12-01 16:55:30

我相信你在找什麼是軟連字符。 ALA一會兒就回來了。

http://www.alistapart.com/articles/the-look-that-says-book/

來源

2010-12-01 16:27:27 MikeNGarrett

我知道這是舊的文章，但因爲我在這裏結束了與谷歌的相關搜索 - 別人也說不定。

我需要做一個長的URL易碎，而且由於不是爲我的網站使用（而不是HTML5標準即和IE8似乎忽略它）

<style>.wbr { display: inline-block; width: 0px;}</style>

因爲我生成的URL我能夠在斜槓前插入<span class="wbr"> </span>。

所以我結束了：

www.example.com<span class="wbr">&nbsp;</span>/somepath<span class="wbr">&nbsp;</span>/blah.php

看起來正常的瀏覽器，但來自字包木窗允許在/標記

www.example.com/somepath/blah.php

希望幫助旁邊的人誰訪問

來源

2011-06-01 05:32:25

您可以嘗試使用：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>

只是要確保應用此只對鏈接的。否則，所有其他單詞也會中斷。:)

來源

2016-02-26 15:33:58

在URL中強制換行

回答

相關問題