長い文字列をワードラップする

質問

長い文字列、ウェブサイトのアドレス、単語、記号のセットなどを、divの幅を保ったまま自動改行で表示するにはどうしたらよいでしょうか？ワードラップのようなものでしょうか。通常、スペースを追加すると動作しますが、ワードラップのようなCSSの解決策はありますか？

例えばそれは（とても意地悪ですが）divを重ねる、水平スクロールを強制する、などです。 wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

上の文字列をdivやブラウザのウィンドウ内に数行できれいに収めるには、何を付け加えればよいのでしょうか？

どのように解決するのですか？

この質問は以前にもここでされています。

• long-word-breaks-my-div の問題を解決したのは誰ですか? (ヒント: stackoverflow ではありません)
• css / js でのワードラップ
• CSS: XUL や HTML で長い文字列 (空白なし) を強制的に折り返すにはどうすればよいですか?
• 長い URL で CSS がオーバーフローする

長い話です。

CSSの解決策としては、あなたは overflow: scroll; でスクロールバーを強制的に表示させたり overflow:hidden; で余分なテキストを切り取ります。また text-overflow:ellipsis; と word-wrap: break-word; の2つがありますが、これらはIEのみです( break-word は CSS3 のドラフトに含まれているので、5 年後にはこの解決策になるでしょう)。

要するに、テキストを次の行に折り返すことを防ぐことが非常に重要である場合、唯一の妥当な解決策は ­ (ソフトハイフン) を挿入することです。 <wbr> (改行タグ)、または ​ (ゼロ幅スペース。 ­ からハイフンを除いたもの)をサーバー側の文字列で指定します。しかし、もしあなたがJavascriptを気にしないのであれば、サーバー側で ハイフネーター というのがあって、これは結構しっかりしているようです。