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


173

Internet Explorerにはワードラップスタイルがあることは知っていますが、div内のテキストに対してブラウザー間でこれを行う方法があるかどうか知りたいのですが。

CSSが望ましいが、JavaScriptスニペットも問題なく機能する。

編集:うん、長い文字列を参照して、みんなを元気づける!


7
ワードラップはデフォルトで行われます。個別の単語がない場合、ラッピングを意味しますか?
Quentin、

回答:


313

元のコメントを読んで、ラザフォードは切れ目のないテキストを折り返すためのクロスブラウザーの方法を探しています(切れ目のない文字列を壊すように設計されたIEでのワードラップの使用によって推測されます)。

/* 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でのみテストしました)


古い投稿ですが、IEが互換モードの場合はスペースをレンダリングしないようです。
ジェレミー

2
私はFirefox 24.6.0を使用してword-wrap: break-wordいますが、これが実際に機能しました。
user545424 2014年

3
Word-wrap: break-wordMicrosoftによって作成されましたが、CSS 3標準の一部であり、トリックを行うものですが:-)
Pascal_dher

38

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

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

ドキュメンテーション:


2
ありがとう!これがうまくいった唯一の答えです(word-break:break-all;私にとっては
うまくいき


12

アーロン・ベネットの解決策は私にとって完璧に機能していますが、彼のコードからこの行を削除する必要がありました-> 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 */
}

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


1
Aaron Bennettがあなたに2年前に同じ答えを述べました。ここで何をしたとしても、付加価値はありません。
AaA 2014年

6
こんにちは、両方の回答をもう一度読んだ場合にわかるように、私が言っていることは、アーロンの解決策は大丈夫だということですが、彼が書いた行の1つでエラーが発生したため、有効な解決策に変更しました私。多分私は彼の答えにコメントがあるはずです、私はそれを知っています、ごめんなさいと感謝
Hugo

私はこの「空白:-pre-wrap」を追加する必要があり、それは機能しました:)
Ravi Khambhati

0

davidが述べているように、DIV デフォルトで単語を折り返します。

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

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

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


@TomHertは本当に奇妙です。しかし、まあ、IE。それは決して機能しません。とはいえ、これは5年前に投稿されました。CSS3には、IEがdeveloper.mozilla.org/en-US/docs/Web/CSS/word-wrap
DAに対応

ええ、知っています。試してみなければならなかったこのソリューションの単純さに驚いただけです。)
Tom Hert 14

0

ピクセル、パーセンテージ、emsのいずれであるかに関係なく、divの幅を指定してみると、その時点でdivはその幅のままで、テキストはdiv内で自動的に折り返されます。


10pxの幅を設定してみてください。次に、10pxより長い単語を使用してください
Paul Zahra
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.