web-dev-qa-db-ja.com

長い単語をdivでワードラップする方法はありますか？

Internet Explorerがワードラップスタイルを持っていることは知っていますが、div内のテキストにクロスブラウザーメソッドを使用する方法があるかどうかを知りたいです。

できればCSSでもJavaScriptスニペットでも大丈夫です。

編集：ええ、長い文字列を参照して、人々を応援します！

csshtmlword-wrap
163
rutherford

元のコメントを読んで、rutherfordはcross-browserラップする方法を探していますnbroken text（IEのWord-wrapの使用によって推測され、壊れていない文字列を分割するように設計されています） 。

/* Source: http://snipplr.com/view/10979/css-cross-browser-Word-wrap */
.wordwrap { 
   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 */
}

私はこのクラスを少し使ってみましたが、とても魅力的です。 （注：FireFoxとIEでのみテストしました）

304
Aaron Bennett

Firefox 38.0.5では、以前の回答のほとんどが機能しませんでした。これは...

<div style='padding: 3px; width: 130px; Word-break: break-all; Word-wrap: break-Word;'>
    // Content goes here
</div>

ドキュメンテーション：

31
Paul Zahra
white-space: pre-wrap

quirksmode.org/css/whitespace.html

14
NVI

アーロン・ベネットのソリューションは私にとって完璧に機能していますが、エラーが発生したため、コードからこの行を削除する必要がありました-> white-space: -pre-wrap;

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   Word-wrap: break-Word;      /* IE */
}

どうもありがとうございました

11
Hugo

Divの幅、ピクセル、パーセンテージ、emsのいずれを指定しても、divはその幅のままになり、テキストは自動的にdiv内で折り返されます。

0
Slevin

デビッドが述べているように、DIV doはデフォルトで単語をラップします。

スペースのない本当に長いテキストの文字列を参照している場合、私はサーバー側の文字列を処理し、空のスパンを挿入します：

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

フォントのサイズ設定などに問題があるため、正確ではありません。コンテナのサイズが可変の場合、spanオプションが機能します。固定幅のコンテナの場合、先に進んで改行を挿入できます。

0
DA.