その他

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

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

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

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

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

word-wrap／overflow-wrap
文の改行というより、長い英単語を途中で改行させるかどうか指定するもののようです。また、日本語の単語に対しては無効なようです。
word-break
表示範囲に合わせて改行するか、単語の切れ目で改行するかなど、文の改行の仕方について指定する際に使用します。
日本語の単語の途中で改行させたくない場合にはこちらを使用します。
overflow
はみ出した分を消す時に使用。
注意事項としてはtdタグには「overflow」が効かないのでdivタグを使う必要があります。

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

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

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%; 　　　　/* 幅を明確に指定する */
}

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

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

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

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

css使用例

body {
　　word-break: break-all;
}

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

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

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

設定する値の説明

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

css使用例

div {
　　overflow: hidden;
}

HTML使用例

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

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