html（+ css）：改行の優先場所を示します
HTMLテーブルセルに表示する次のテキストがあるとします。
Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks
そして、コンマの1つの後、優先的に改行するようにします。
HTMLレンダラーに指定された場所でブレークを試みるように指示する方法はありますか？スペースの1つの後のブレークを試みる前に最初にそれを行う、without改行しないスペースを使用していますか？改行しないスペースを使用すると、幅が無条件に大きくなります。 Iwant行ラッピングアルゴリズムが最初にコンマを使用して行を収まらない場合は、スペースの1つ後に改行が発生します。
テキストフラグメントを<span>要素でラップしようとしましたが、何も役に立たないようです。
<html>
<head>
<style type="text/css">
div.box { width: 180px; }
table, table td {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span>Honey Nut Cheerios,</span>
<span>Wheat Chex,</span>
<span>Grape-Nuts,</span>
<span>Rice Krispies,</span>
<span>Some random cereal with a very long name,</span>
<span>Honey Bunches of Oats,</span>
<span>Wheaties,</span>
<span>Special K,</span>
<span>Froot Loops,</span>
<span>Apple Jacks</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html>
注： CSS3 text-wrap: avoid の動作は私が望んでいるように見えますが、動作させることができないようです。
を使用して
span.avoidwrap { display:inline-block; }
一緒にしたいテキストをラッピングします
<span class="avoidwrap"> Text </span>
最初に優先ブロックでラップし、次に必要に応じて小さなフラグメントでラップします。
Dan Mall の非常にきちんとしたRWDソリューションがあります。レスポンシブ改行に関する他のいくつかの質問は、これと重複するものとしてマークされているため、ここに追加します。
あなたの場合：
<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>
そして、メディアクエリのCSSの1行：
@media screen and (min-width: 768px) {
.rwd-break { display: none; }
}
簡単な答えは、ゼロ幅のスペース文字を使用することです​単語内にブレークスペースを作るために使用されます特定のポイントで。
正確に反対改行しないスペース （実際にはWord-joiner⁠）（Word-joinerはゼロ幅バージョンの改行しないスペース）
（non-breaking hyphen‑） （ nbsp） の「バリアント」
HTMLのみ（CSS/JSなし）ソリューションが必要な場合は、zero-widthスペースとnon-breakingスペースの組み合わせを使用できますしかし、これは本当に乱雑であり、人間が読めるバージョンを書くには少し手間がかかります。
ctrl + c、 ctrl + v 助けます
例：
Honey Nut Cheerios,<!---->​<!--
-->Wheat Chex,<!---->​<!--
-->Grape‑Nuts,<!---->​<!--
-->Rice Krispies,<!---->​<!--
-->Some random cereal with a very long name,<!---->​<!--
-->Honey Bunches of Oats,<!---->​<!--
-->Wheaties,<!---->​<!--
-->Special K,<!---->​<!--
-->Froot Loops,<!---->​<!--
-->Apple Jacks
読めない？これは、コメントタグのない同じHTMLです。
Honey Nut Cheerios,​Wheat Chex,​Grape‑Nuts,​Rice Krispies,​Some random cereal with a very long name,​Honey Bunches of Oats,​Wheaties,​Special K,​Froot Loops,​Apple Jacks
ただし、電子メールのHTMLレンダリングは完全に標準化されていないため、このソリューションはCSS/JSを使用しないため、この種の使用には適しています
また、これを<span>ベースのソリューションと組み合わせて使用すると、改行アルゴリズムを完全に制御できます
（社説メモ：）
私があなたに持っているのを見ることができる唯一の問題は、あなたが好む破損のポイントを動的に変更したい場合です。これには、サイズに比例した各スパンの一定のJS操作が必要であり、テキスト内のHTMLエンティティを処理する必要があります。
答えはノーです（使用する改行アルゴリズムを変更することはできません）。
しかし、いくつかの回避策があります（最良のものは 受け入れられた答え）
改行しないスペース で近くに行くことができますが、一緒に行く単語の間のみ（スパンにあるもの、コンマの後ではありません）、または@Marcelが言及したようにwhite-space:nowrapを使用できます。
両方の解決策は同じことを行い、両方ともnot単語のグループがそれ自体に適合しない場合は分割します。
上記のマークアップでspan { white-space:nowrap }を使用します。本当に期待できるほど良いです。
HTML5の新しい答え：
HTML5には<wbr>タグが導入されています。 （Word Break Opportunityの略です。）
<wbr>を追加すると、ブラウザが他のどこよりも先にブレークするように指示されるため、コンマの後に単語をブレークするのは簡単です。
Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks
IE以外のすべての主要なブラウザーでサポートされています。