75

重複の可能性:
CSS: 長い文字列 (空白なし) を強制的に XUL や HTML でラップするにはどうすればよいですか?

次のコードがあるとしましょう。

<div style="width:100px;height:1000px">This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces</div>

申し訳ありませんが、スタック オーバーフロー (プレビューによると) は改行コード スニペットではありません。

ほとんどの (?) 状況では、次のようにすると、長いテキスト行を保持するコンテナが、含まれるテキストの幅いっぱいまで引き伸ばされます。

親コンテナーの CSS で指定された幅 (width:100px) に従って、これを強制的に改行 (単語の途中でも) したいと考えています。

私が知らないcssタグを介してこれは可能ですか?

IE6+ の互換性、および gecko/webkit/opera をお願いします。

4

2 に答える 2

120

これを使用してラップできます：

.wrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}
于 2012-07-22T11:32:24.213 に答える
13

と を組み合わせることでword-wrap、word-breakこれを解決できる場合があります。DIV の長い単語で改行を強制する方法を参照してください。(だまされる可能性あり)

于 2012-07-22T11:28:25.907 に答える