必要に応じてテキストを単語の途中で折り返すことができる最善の解決策を探しています。せいぜい、私はほとんどのブラウザ互換性を意味し、単語の中で中断する前に単語の中断を優先します。
マークアップが私のものよりも見栄えが良ければ、それも役立ちます（私の答えを参照してください）。
編集：
これは特にユーザー生成コンテンツ用であることに注意してください。
編集2：
問題のサイトのFirefoxユーザーの約25％はまだv3.0以下を使用しているため、それらをサポートすることが重要です。これは、先月分のデータ（約121,000回の訪問）に基づいています。
cssプロパティword-wrap: break-wordは、長い単語がコンテナに対して長すぎる場合、次の行に折り返すように強制します。これは、IE（さかのぼる）、Firefox、Safariでサポートされています。
編集：古いバージョンのFirefoxでも、とを使用してこれを実現できる可能性があるようwhite-space: -moz-pre-wrapですwhite-space: pre-wrap。詳細については、こちらをご覧ください。ただし、古いバージョンのFirefoxではこれをテストしていません。
明確な答えはないので（たとえば、ハイフンが必要か、どのブラウザーをサポートする必要があるかなど、ニーズによって異なります）、Adobe BrowserLabを介して調査を行い、オプションを確認しました。
ハイフンが必要ない場合は、を使用して最高の互換性を得ることができます<wbr>。ハイフンが必要な場合は、使用する­のが最善の策ですが、Firefox 2.0 Mac /WindowsまたはSafari3.0ではこれが機能しない（charでラップする）ことに注意してください。
DIVまた、オーバーフロー、スクロール、または文字の折り返しを使用して長い単語をまったく処理しないことを選択した場合、IE6とIE7の両方がコンテナの幅を拡大して応答することに注意してください（少なくとも私が使用した場合）。
結果：
ブラウザメソッドがcharでラップハイフンを追加水平方向にオーバーフローコンテナが水平方向に拡張 -------------------------------------------------- -------------------------------------------------- ------------------------------------------ Firefox3.0-WindowsXPなし いいえ いいえ はい いいえ Firefox 3.0-WindowsXP<wbr>はいいいえいいえいいえ Firefox 3.0-Windows XP＆shy; または＆＃173; はいはいいいえいいえ Firefox 3.0-Windows XPのワードラップ：break-word いいえ いいえ はい いいえ IE7-WindowsXPなし いいえ いいえいいえ はい IE7-WindowsXP<wbr>はいいいえいいえいいえ IE7-Windows XP＆shy; または＆＃173; はいはいいいえいいえ IE7-Windows XPのワードラップ：break-wordはいいいえいいえいいえ Firefox3.0-OSXなし いいえ いいえ はい いいえ Firefox 3.0-OSX<wbr>はいいいえいいえいいえ Firefox 3.0-OS X＆shy; または＆＃173; はいはいいいえいいえ Firefox 3.0-OS Xワードラップ：break-word いいえ いいえ はい いいえ Safari3.0-OSXなし いいえ いいえ はい いいえ Safari 3.0-OSX<wbr>はいいいえいいえいいえ Safari 3.0-OS X＆shy; または＆＃173; いいえ いいえいいえいいえ Safari 3.0-OS Xワードラップ：ブレークワードはいいいえいいえいいえ Chrome3.0-WindowsXPなし いいえ いいえ はい いいえ Chrome 3.0-WindowsXP<wbr>はいいいえいいえいいえ Chrome 3.0-Windows XP＆shy; または＆＃173; はいはいいいえいいえ Chrome 3.0-Windows XPのワードラップ：break-wordはいいいえいいえいいえ Firefox2.0-OSXなし いいえ いいえ はい いいえ Firefox 2.0-OSX<wbr>はいいいえいいえいいえ Firefox 2.0-OS X＆shy; または＆＃173; いいえ いいえ はい いいえ Firefox 2.0-OS Xワードラップ：break-word いいえ いいえ はい いいえ Firefox2.0-WindowsXPなし いいえ いいえ はい いいえ Firefox 2.0-WindowsXP<wbr>はいいいえいいえいいえ Firefox 2.0-Windows XP＆shy; または＆＃173; いいえ いいえ はい いいえ Firefox 2.0-Windows XPのワードラップ：break-word いいえ いいえ はい いいえ Firefox3.5-WindowsXPなし いいえ いいえ はい いいえ Firefox 3.5-WindowsXP<wbr>はいいいえいいえいいえ Firefox 3.5-Windows XP＆shy; または＆＃173; はいはいいいえいいえ Firefox 3.5-Windows XPのワードラップ：break-wordはいいいえいいえいいえ Firefox3.5-OSXなし いいえ いいえ はい いいえ Firefox 3.5-OSX<wbr>はいいいえいいえいいえ Firefox 3.5-OS X＆shy; または＆＃173; はいはいいいえいいえ Firefox 3.5-OS Xワードラップ：break-wordはいいいえいいえいいえ IE6-WindowsXPなし いいえ いいえいいえ はい IE6-WindowsXP<wbr>はいいいえいいえいいえ IE6-Windows XP＆shy; または＆＃173; はいはいいいえいいえ IE6-Windows XPのワードラップ：break-wordはいいいえいいえいいえ IE8-WindowsXPなし いいえ いいえ はい いいえ IE8-WindowsXP<wbr>はいいいえいいえいいえ IE8-Windows XP＆shy; または＆＃173; はいはいいいえいいえ IE8-Windows XPのワードラップ：break-wordはいいいえいいえいいえ Safari4.0-OSXなし いいえ いいえ はい いいえ Safari 4.0-OSX<wbr>はいいいえいいえいいえ Safari 4.0-OS X＆shy; または＆＃173; はいはいいいえいいえ Safari 4.0-OS Xワードラップ：ブレークワードはいいいえいいえいいえ
サンプルHTML：
<html>
<head>
<style>
div {
width: 4em;
border: 1px solid black;
margin-bottom: 6em;
padding: .25em;
}
</style>
</head>
<body>
This is text easily contained by the DIV:
<div>proper width</div>
A long word with no character breaking:
<div>
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i><wbr></i> tag:
<div>
A<wbr>R<wbr>e<wbr>a<wbr>l<wbr>l<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d<wbr>T<wbr>h<wbr>a<wbr>t<wbr>N<wbr>e<wbr>e<wbr>d<wbr>s<wbr>T<wbr>o<wbr>B<wbr>e<wbr>B<wbr>r<wbr>o<wbr>k<wbr>e<wbr>n A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
</div>
<i>&shy;</i> character:
<div>
A­R­e­a­l­l­y­L­o­n­g­W­o­r­d­T­h­a­t­N­e­e­d­s­T­o­B­e­B­r­o­k­e­n A­n­d­A­n­o­t­h­e­r­W­o­r­d
</div>
<i>overflow: scroll</i> CSS attribute:
<div style="overflow: scroll">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i>word-wrap: break-word</i> CSS attribute:
<div style="word-wrap: break-word">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
</body>
</html>
この質問の別のインスタンスからの私の答えは、CSSでの長いテキストのラッピングで見つかりました：
組み合わせて使います
word-wrap: break-word;
overflow: hidden;
これに対処する。このword-wrap設定では、そのプロパティをサポートするブラウザでは単語の長さに関係なく単語を折り返すことができますが、この設定overflowでは、認識しないブラウザで使用可能なスペースの最後で単語が切り捨てられword-wrapます。これは、javascriptを使用せずに取得する可能性が高いのと同じくらい優雅な劣化です。
[編集：OPは彼の質問を更新して、これは特にユーザー生成コンテンツ用であると述べました。以下は（簡単に）そのためには機能しません（独自のハイフネーション辞書が必要です）。ただし、誰かがこの質問を見つけて、これを行うためにHTMLオプションが必要になった場合に備えて、ここに残しておきます。]
ソフトハイフン（別名オプションのハイフン;­または­）を使用できます。HTML4で定義されていました。使用したことはありませんが、試してみたところ、少なくともIE6、IE7、Chrome 4、FF 3.6、およびSafari 4forWindowsで動作します。
ユーザーエージェント（ブラウザ）がこれを自動的に処理する必要があると主張する人もいるかもしれません（ドキュメントが使用されている言語のハイフン辞書を使用）。実際には、それを自動的に実行する単一のWebブラウザーを知りません。どうやら、最近のブラウザは、あなたがそうすることができると彼らに言うならば、そうします。CSSオプションについては、wsanvilleの回答を参照してください。
word-wrap: break-wordCSSプロパティを確認することをお勧めします。
次の例は、Google Chrome 4.0、Firefox 3.5.7、Safari 4.0.4、およびIE8で機能します。
<html>
<body>
<div style="word-wrap: break-word; width: 50px;">
Loremipsumdolorsitametconsectetueradipiscingelitselaoreetdoloremagnaaliq
</div>
</body>
</html>
残念ながら、回答の1つへのコメントでBalusCが指摘しているように、上記は3.5より古いバージョンのFirefoxでは機能しません。TJ Crowderが指摘しているように、古いFirefoxバージョンを使用しているユーザーの数は6％未満のように思われるため、をサポートしていないブラウザのにフォールバックすることをお勧めします。見栄えがよくないかもしれませんが、多くの単語が割り当てられたスペースより長くなることを期待していない場合、ユーザーの1人がスクロールバーを見る可能性は非常に低く、時間が経つにつれてさらに低くなります。ユーザーはブラウザをアップグレードします。少なくとも、そのような状況では優雅に失敗するでしょう。overflow: scrollword-wrap
私はここで同様の答えを見つけました：http： //css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
より堅牢なブラウザのサポート
CSSのみ
-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;
テキストがPHPで生成されている場合は、PHP関数があります。
<?php
$text = "The quick brown fox jumped over the lazy dog.";
$newtext = wordwrap($text, 20, "<br />\n");
echo $newtext;
?>
また、区切り文字を知っていて知っている場合は、PHP関数explodeを試すことができます。forループの後に表示します（explodeは配列を返します）。
過去に、私は次のようなものを使用しました（当時、Safariでは機能しませんでした。IIRCですが、それは数年前のことです）。
A<wbr>V<wbr>e<wbr>r<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
（これを動的に生成して、レイアウトを行う人がそのような残虐行為を見る必要がないようにします。）
キーボードの改行を、改行したい場所に入力します。
例えば。
Thisisaverylongword
になります
Thisisaveryロングワード