【CSS】テーブル内の文字列を簡単に折り返す方法

通常テーブルは各列の幅を勝手に計算してくれるので折り返す必要はありません。

ですが特殊な条件だとテーブル要素内のテキストを折り返ししないといけない場面が出てきます。

ということでCSSを使ってテーブル内の文字列を折り返す方法について紹介

文字列の折り返しが必要になる場面

テーブル内で文字列を折り返ししないといけない場面・・・

それはテーブルの幅をtable-layoutプロパティを使って固定している場合です。

そのやり方については次の記事でも解説しました。

 

例えば次のようなテーブルを作成したとしましょう。

equal_table  というクラス名を持つテーブルです。

 

このテーブル幅を固定しているのが次のCSS

table-layout: fixed;  をテーブルに指定することで幅が固定になります。

このCSS例だとテーブル幅が常に300pxで固定されるので、それぞれの列幅は100pxになるということ

 

それで何が問題かというと次のCodePenを見てください。

See the Pen 【CSS】テーブル内のテキストがはみ出てしまう例 by ぴー助 (@pisuke-code) on CodePen.

見れば分かるように1行目2列目のtd要素の文字列がはみ出てしまっています。

 

こういう風にテーブル幅が固定されている場合にtd要素内での文字列の折り返しが必要になるんです。

ではどうやって折り返しするかですが、あるCSSプロパティを使えば簡単です。

td要素で文字列を折り返しする方法

td要素で文字列の折り返しするにはどうすればいいか・・・

その答えはtd要素に対して  word-wrap: break-word;  を指定するだけです。

 

例えば先ほどの例に出したテーブルなら次のようなCSSを適用するだけ

たったこれだけです。

 

実際にどのようなテーブルの見た目になるかは次のCodePenを見てください。

See the Pen 【CSS】テーブル内のテキストを折り返す方法 by ぴー助 (@pisuke-code) on CodePen.

1行目2列目のtd要素が列幅に収まるように途中で改行されています。

 

ちなみに  word-wrap  の取れる値には  normal  と  break-word  の2種類があります。

その2つの違いはそれぞれ次の通り

  • normal
    単語の途中だと改行しない。必要に応じて幅が変わる
  • break-word
    単語の途中でも気にせずに改行する

td要素の折り返しに  normal  を使わないのは単語単位で改行をしてしまうからです。

単語単位ではなく文字単位で改行をするには  break-word  を使うのが正しいですね。

ここまでのまとめ

ここまでのことを簡単にまとめてみると次の通り

  • テーブルで文字列の折り返しが必要になる場合がある
    例えば  table-layout: fixed;  を指定してテーブル幅を固定している場合など
  • 文字列の折り返しにはword-wrapを指定
    td要素に対して  word-wrap: break-word;  のように指定
    ただし  word-wrap: normal;  だと単語単位で折り返されてしまうので注意!

つまりテーブルの幅が固定ならword-wrapプロパティを使えばOKってことです。

 

ということでテーブル内の文字列を折り返す方法についてまとめました。

ではでは・△・)ノ バイバイ

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください