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つの後に改行を入れたいのですが。
<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動作は私が望んでいるように見えますが、動作させることができません。
スパン内で改行しないスペースを使用できます。
—
ガブリエレペトリオーリ
しかし、私は使用したくない非 -breakingスペースを。「ブレイクしたくない」のスペースを使いたいのですが、私の知る限りでは、そうしたスペースは存在します。
—
Jason S
@ジェイソン..私はあなたを感じる..しかしそれは不可能です..答えを追加しました。
—
ガブリエレペトリオーリ
drat、それはコンピュータ科学者がタイポグラファーからの入力なしでレンダリングアルゴリズムを書くときに起こることです。
—
Jason S
@EggertJóhannessonからの回答は、適切な回避策を提供するため、受け入れる必要があります。
—
Gabriele Petrioli 2014年