web-dev-qa-db-ja.com

オーバーフローせずに次の行にテキストを表示するにはどうすればよいですか?

ページにテキストを含む固定幅のdivがあります。文字の長い文字列を入力すると、オーバーフローします。オーバーフローを非表示にしたくない新しい行にオーバーフローを表示したい、以下を参照:

<div id="textbox" style="width:400px; height:200px;">
dfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssfddddddddddddddddddddddsdffffffffffffffffsdffffffffffffffffdfssssssssssssdf
</div>

とにかくオーバーフローを無効にし、オーバーフローしたテキストを新しい行に配置する方法はありますか? Twitterはこのようなことをしますが、CSSではJavascriptを使用している可能性があります。

誰でもこれを助けることができますか?

79
user342391
Word-wrap: break-Word

しかし、それはCSS3です- http://www.css3.com/css-Word-wrap/

132
mikemerce

追加するだけ

white-space: initial;

テキストに対して、行テキストは次の行に自動的に挿入されます。

139
Pankaj Verma

<wbr>タグ -他の人が提案したWord-wrapプロパティほどエレガントではありませんが、すべての主要なブラウザ(IEを読む)がCSS3を実装するまでは有効なソリューションです。

5
casablanca

さて、長い切れ目のない文字列に1つ以上の「ソフトハイフン」(&#173;)を付けることができます。古いIEバージョンがそれを正しく処理しているとは思いませんが、想定することは、必要な場合に使用できる許容されるWordブレークについてブラウザに伝えることです。

さて、これらのキャラクターをどこに詰め込むかを正確にどのように選びますか?それは実際の文字列とそれが何を意味するかにかかっていると思います。

3
Pointy