divの幅を維持するために、長い文字列、ウェブサイトのアドレス、単語、または記号のセットを自動改行で表示するにはどうすればよいですか？私は一種の言葉遣いを推測する。通常はスペースを追加しますが、ワードラップなどのCSSソリューションはありますか？wordwrap非常に長い文字列
例えば、それは（非常に意地悪）divをオーバーラップし、
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww水平スクロールなどを強制的に私はdivの中またはブラウザウィンドウ内の数行の中にきちんとそれに合うように上記の文字列に何を追加することができますか？
この質問は前にここに頼まれました：
かいつまん：
CSSソリューションの場合は、overflow: scroll;を指定するとスクロールバーが表示され、overflow:hidden;は余分なテキストを切り捨てるようになります。 text-overflow:ellipsis;とword-wrap: break-word;がありますが、それらはIEのみです（ただし、break-wordはCSS3草案にありますので、今後5年間の解決策になります）。
ボトムラインは、テキストを次の行に折り返して止めることが非常に重要な場合は、­（ソフトハイフン）、<wbr>（単語区切りタグ）、または​（空白のないスペース、文字列サーバ側の­マイナスハイフンと同じ効果）しかし、あなたがJavascriptを気にしないなら、かなり固いと思われるhyphenatorがあります。
私はこれを質問の「解決策」としてマークしましたが、私にはまだいくつかの穴があります...ブレークワードは本質的に私が見ているものですが、他のオプションは手動ブレーク、ハイフンなどであるが、ラインをきれいに包むことはない。 –
残念ながら、この特定の問題に対しては、きれいで優雅な解決策はありません。ブレーク・ワードがサポートされるまで、私たちはすべてを手に入れています。 –
サーバ側の改行が終わってPHPを使用している場合は、[wordwrap]（http://php.net/manual/en/function.wordwrap.php）機能を使用できます。 – Roman
いつか、CSS3のword-wrapプロパティにアクセスしてください。Force Wrapping: the 'word-wrap' property
いつか...
word-wrap: break-word;は、IE7 +でFF 3.5利用可能であり、Webkitのは、ブラウザ（Safariの/クロームなど）を有効に。 IE6を処理するには、また宣言する必要があります
FF2.0がブラウザのマトリックスにない場合は、これらを使用することは実行可能な解決策です。残念なことに、文字が壊れている前の行はハイフネーションではありません。これは印刷上の悪夢です。私は、控えめなJavaScriptであるPaoloによって提案されているハイフネータを使用することをお勧めします。 JavaScript非対応のユーザーのフォールバックは、ハイフンなしの壊れた単語になります。私は当分の間それで生きることができます。この問題はCMSで発生する可能性が高く、Webデザイナーは入力する内容や改行やソフトハイフンを実装する場所を制御できません。
私はW3 specificationを見て、CSS3のハイフネーションについて説明しました。残念ながら、いくつかの提案があるようですが、まだ具体的なものはありません。ブラウザベンダーはまだ何かを実装していないようだ。私は独自コードのためにMozillaとWebkitの両方をチェックしましたが、何の兆候もありません。
これは私のために働いた。世界のほとんどはIE7 +、FF3.5 +、Webkitを持っていますので、あなたはワードラップを使用するように設定されていると思います。 –
これはちょうどhere以上に記載されていますが、おそらくこの質問に関係します。すぐに最高のプロパティがオーバーフローラップされます。それが実装されます場合は最高値は次のようになります。ハイフネーションがありません：
* {
overflow-wrap:hyphenate.
}
Doesen'tがiphoneまたはFirefox、およびオーバーフロー・ラップへの書き込み時にまだどのような方法でサポートされているように見えます作業草案であっても。
p {
word-wrap: break-word;
-moz-hyphens:auto;
-webkit-hyphens:auto;
-o-hyphens:auto;
hyphens:auto;
}
これに関する良い記事：http://www.impressivewebs.com/new-css3-text-wrap/ – koosa
ブーム！私のすべての問題をここで解決しました。ありがとう@adriatiq！ –
通常、細胞が自然にこれを行いますが、あなたはとdivの上でこの動作を強制することもできます：その間に
私が使用したい
div {
width: 950px;
word-wrap: break-word;
display: table-cell;
}
display: block; overflow: hidden; text-overflow: ellipsis; width: 200px; // or whatever is best for you
私はすべての長い文字列、URLなどを防ぐためのコードを使用します..
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
常にline-heightプロパティを指定します。指定しないと、word-break: break-all;プロパティのエラーが発生する可能性があります。
最新のChromeのトリックをしているようです：
[the element],
[the element] * {
word-wrap: break-word;
white-space: pre;
}
私はどのブラウザが、Chromeをチェックしていません。
偶数のスタックオーバーフローではワードラップが発生しません：/ – AlbertoPL
まあ10ヶ月後にstackoverflowが元の乱雑な投稿を修正したように見えます。スタイルラップを追加しました：break-word ;これはChromeでのトリックです。 –