非改行スペースを使用せずに、HTML で行の折り返しのための優先ブレークポイントを示す方法

行折り返しの優先ブレークポイントの指定

HTML では、通常、改行はスペースまたはダッシュで発生します。ただし、場合によっては、特定の位置にスペースやダッシュがない場合でも、開発者はその行に優先ブレーク ポイントを指定したい場合があります。

次の状況を考えてみましょう。テーブルのセルには、次のような長いリストが含まれています。カンマの後に優先的にラップするシリアル名。ただし、不要な改行を防ぐために非改行スペースを使用すると、列が不要に広がる可能性があります。

推奨される解決策:

非改行スペースを使用する代わりに、インラインブロック要素を利用して、望ましい結果を達成できます。優先ブレークポイントを で囲みます。 CSS クラス「avoidwrap」要素を使用すると、これらのブロック内で改行が発生するのを防ぐことができます。

例:

<code class="html"><span class="avoidwrap">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</span></code>

<code class="css">span.avoidwrap {
  display: inline-block;
}</code>

このアプローチにより、 内のカンマの後で優先的に改行する行要素。ただし、行をさらに折り返す必要がある場合は、小さなフラグメント内のスペースの後で改行されます。

注:

CSS3 の text-wrap: 回避動作では、次のような動作が提供されます。同様の機能。ただし、実稼働環境で使用する前にブラウザのサポートを確認することが重要です。

以上が非改行スペースを使用せずに、HTML で行の折り返しのための優先ブレークポイントを示す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。