HTML テーブルの特定の位置で改行を発生させる必要がある場合、改行を制御する方法

HTML での推奨改行

Web コンテンツの作成では、表内にテキストを表示することがよくありますが、コンテンツのオーバーフローを防ぐために改行が必要になります。ただし、特定のポイントで改行が発生するように設定する場合があります。

優先ブレーク ポイントの指定

この例では、テーブル セルに次のリストが含まれています。シリアルはカンマで区切られます。望ましい動作は、改行がカンマの後、スペースの前に発生することです。ただし、HTML には優先ブレーク ポイントを指定する方法がネイティブには提供されていません。

非改行スペースの回避

非改行スペースを挿入すると、強制的に改行が発生する可能性があります。特定の時点でのみですが、テキストの幅も無条件に増加します。これを回避するには、別のアプローチが必要です。

Text-Wrap プロパティ

CSS3 では、テキスト内の改行を制御できる text-wrap プロパティが導入されました。ただし、この例では text-wrap:回避を使用しようとしましたが、失敗したことが判明しました。

Inline Block Display

代わりに、display: inline-block プロパティを使用できます。ラッパー要素と組み合わせて使用​​します。これにより、周囲のテキストとは独立して折り返すことができるテキストの「ブロック」がセル内に効果的に作成されます。

例

目的の動作を実装するには、次の CSS とHTML を使用できます:

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

<code class="html"><td>
  <span class="avoidwrap">Honey Nut Cheerios,</span>
  <span class="avoidwrap">Wheat Chex,</span>
  <span class="avoidwrap">Grape-Nuts,</span>
  <span class="avoidwrap">Rice Krispies,</span>
  <span class="avoidwrap">Some random cereal with a very long name,</span>
  <span class="avoidwrap">Honey Bunches of Oats,</span>
  <span class="avoidwrap">Wheaties,</span>
  <span class="avoidwrap">Special K,</span>
  <span class="avoidwrap">Froot Loops,</span>
  <span class="avoidwrap">Apple Jacks</span>
</td></code>

Effect

avoidwrap クラスを使用すると、シリアル名がまとめられ、カンマで改行されます。希望どおりに。行をさらに折り返す必要がある場合は、シリアル名がスペースで区切られます。

以上がHTML テーブルの特定の位置で改行を発生させる必要がある場合、改行を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。