URLで改行を強制する

Question

私のブログにはTwitterのフィードがあります。素晴らしいことですが、つぶやきの長いURLに問題があります。長い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のリクエストからデータを受け取り、事前に定義された<ul>から<li>要素を移入するコールバック関数が含まれています。

#twitter_update_list li span a { 
    word-wrap: break-word; 
} 

私は<wbr>タグについて知っているとのように見えたjqueryの機能でそれを使用しようとしていた：私は、自動的に（それをサポートするブラウザ用）のラインを破るために、次のCSSを使用してい

この：私はそのスニペットを使用しようとしたとき

$(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

はソフトハイフンです。これはALAによって覆されていました。

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

Answer 3

は、私は、これは古い記事です知っているが、私は関連のGoogle検索で、ここで終わったので、 - 誰か他の人にも可能性があります。

私は私がしたURLを生成するので、私は壊れやすい長いURLを作るために必要な、そして以来、私のサイトには使用できませんでした（すなわちないHTML5の規格では、とIE8はそれを無視しているようだ）

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

スラッシュの前に<span class="wbr">&nbsp;</span>を挿入することができます。

は、だから私はなってしまっ：ブラウザで通常見えるが/マークでワードwrapingからできます

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

Answer 4

を訪問次の人を助け

www.example.com/somepath/blah.php 

・ホープ

お試しください：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>

ただ、リンクのみにこれを適用することを確認してください。そうでなければ、他のすべての単語も壊れます。:)