CSSでテキストを折り返す

Question

ランダムに生成された文字列がずっと長くなっています。私は1つのdivブロックに表示しています。それはずっと長い単一の文字列です。 1行に書かれています。例えば

：

String str="13,7,5,1,10,7,18,11,17,10,9,16,17,9,6,19,6,13,2,18,6,9,8,5,15,4,17,16,12,8,19,16,5,9,6,16,16,5,16,12,0,14,7,11,12,11,12,16,8,3,16,3,1,10,4,14,5,9,4,3,8,3,0,19,5,7,8,7,13,14,4,3,12,6,5,19,17,3,3,19,0,4,14,8,15,17,14,5,9,3,9,19,18,8,10,0,6,1,18,16,3,16,10,9,15,10,4,7,1,7,11,6,11,16,4,11,10,1,0,15,16,19,6,15,18,14,16,16,5,17,9,19,12,7,14,14,11,19,18,10,9,5,11,2,9,0,3,15,14,1,7,14,12,17,1,10,14,5,17,16,19,10,12,6,19,16,5,19,10,9,18,14,11,9,1,18,0,10,0,19,7,17,2,4,14,2,1,3,9,17,11,7,12,4,7,5,17,2,1,6,19,14,5,3,2,6"; 

<div id='row' style='width:100px;height:500px;'> 

</div> 

私はdivのブロックに固定幅を設定しました。私はこの長い文字列を1行で表示するのではなく、複数の行に表示したい。

私はCSSを試しました'text-wrap:normal'それは動作しません。実際、このプロパティはすべてのブラウザで動作するわけではありません。

Answer 1

使用word-wrap:break-word; CSSスタイル：

<div id='row' style='word-wrap:break-word;'> 
13,7,5,1,10,7,18,11,17,10,9,16,17,9,6,19,6,13,2,18,6,9,8,5,15,4,17,16,12,8,19,16,5,9,6,16,16,5,16,12,0,14,7,11,12,11,12,16,8,3,16,3,1,10,4,14,5,9,4,3,8,3,0,19,5,7,8,7,13,14,4,3,12,6,5,19,17,3,3,19,0,4,14,8,15,17,14,5,9,3,9,19,18,8,10,0,6,1,18,16,3,16,10,9,15,10,4,7,1,7,11,6,11,16,4,11,10,1,0,15,16,19,6,15,18,14,16,16,5,17,9,19,12,7,14,14,11,19,18,10,9,5,11,2,9,0,3,15,14,1,7,14,12,17,1,10,14,5,17,16,19,10,12,6,19,16,5,19,10,9,18,14,11,9,1,18,0,10,0,19,7,17,2,4,14,2,1,3,9,17,11,7,12,4,7,5,17,2,1,6,19,14,5,3,2,6 
</div>​ 

LIVE Demo

MDN docs：

ワードラップCSSプロパティは、ブレークできない文字列が長すぎて収まらない場合、オーバーフローを防ぐためにブラウザがワード内の行を分割することを許可するかどうかを指定するために使用されます。 ！私はMDNでそれを見つけることができませんでしたが、w3schoolでこれを見つけた：

「テキストラッププロパティは、主要なのいずれかでサポートされていません。あなたがしようとしたtext-wrapについて

ブラウザ。

Answer 2

word-wrap:break-wordを.rowDIVに書き込んでください。このように書く：

#row{ 
    word-wrap:break-word; 
} 

チェックこのhttp://jsfiddle.net/Rfc2j/1/

Answer 3

だけword-wrap: break-word

例フィドル使用：http://jsfiddle.net/Rfc2j/

Answer 4

使用word-wrap:break-word;プロパティの代わりに、text-wrap:normal

Answer 5

は、各コンマの後にスペースを生成します。このような表現は人間の言葉では普通ですが、数値シーケンスの可読性も向上します（なぜそれが生成されているのだろうか？なぜ必要なのでしょうか？）。 word-spacingを負の値に設定することで、スペーシングの量を調整できます。

何らかの理由でスペースを入れたくない場合は、各コンマの後に<wbr>タグを生成してください。スタンダードライター（HTML5を除く）に惑わされず、ブラウザによって事実上普遍的にサポートされています。しかし、現代的な奇妙なもの（IEとOperaで）をカバーするには、スタイルシートに次のものを追加してください：wbr:after { content: "\00200B"; }。

多くのブラウザでサポートされているword-wrap:break-wordを使用すると、数字の間やコンマの前に自由に感じることができます。行末に "42"を、行末に "4"を、次の行の先頭に "2"を表示します。