パソコンの有効活用で、ホームページの作成を始めました。
自作パソコンや周辺機器、スマホに関する話題です。
root化 や 部品交換等の改造もメモしています。
使用している気に入ったアプリの紹介・・等々。
   

table の 列の文字が
はみ出さないように改行する方法

tableタグを使ってレイアウトしていると、セル内の文字が枠からはみ出る事があります。
スマホやタブレット用にレスポンシブデザインを考えている時にも、レイアウトを崩してしまいます。

日本語文字だけの場合は自動的に折り返すが、半角英数が含まれている時は折り返さず、はみ出してしまうことも多いようです。

使用するプロパティ

領域内に収まりきらない内容を、どのように処理するかを指定するプロパティです。

設定するとその位置から見た子孫にも有効となります。
よって、ページ全体で有効にしたい時は body に設定します。

word-wrap/overflow-wrap

このプロパティを使用した場合、可能な限り禁則処理が保持され、可能な限り単語途中での折り返しを避けることができます。

単語の途中で折り返しが発生するのは、その単語の幅が行ボックスの幅より大きい場合のみとなります。

css使用例

body {
  word-wrap: break-word;   /* IEやFirefox対応用 */
  overflow-wrap: break-word;
}


折り返しが効かない場合

width: auto; 等を使用しているとブラウザが勝手に内容に合うように適当な領域を確保するため、レイアウトが崩れてしまいます。

対処法として、テーブルを固定レイアウトにし、width: auto; を width: 100%; のように表示幅を明示してやれば解決できます。

css使用例

table {
  table-layout: fixed;  /* 固定レイアウト */
  width: 100%;     /* 幅を明確に指定する */
}

word-break

注意点として、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています

一切の禁則処理を解除し、どの文字の間でも改行したい時に使用します。

たとえば英語のorのように2文字だけの単語でも、orが行ボックスの幅からあふれそうな位置にあれば、あふれる直前で折り返すためoとrの途中で折り返してしまいます。

これを指定すると、word-wrap/overflow-wrap の指定は必要ないようです。

css使用例

body {
  word-break: break-all;
}

overflow

領域内に収まりきらない内容を、どのように処理するかを指定するプロパティです。

table表示で IE でも Chrome でも td からはみ出した文字を消します。

注意事項としては、tdタグには「overflow」が効かないのでdivタグを使う必要があります。

設定する値の説明

注意事項としては tdタグ には「overflow」が効かないので divタグ を使う必要があります。

css使用例

div {
  overflow: hidden;
}


HTML使用例

<td><div>ABCDEFGHIJKABCDEFGHIJK</div></td>