【CSS】テーブル(表)から文字がはみ出す・折り返されない時の対処法【word-break: break-all】

コーディング
スポンサーリンク

テーブル(表)から文字がはみ出す

テーブルで表を作った時にこんなことに・・・

 

 

メールアドレスが長いことでテーブルもバランスがおかしくなっています。
widthで幅を付けても動きません。

HTMLはこんな感じです。

 

これはもともとの仕様で、英文が意図せぬ部分で変な改行をしないために、ざっくり言うと「スペースや – や . , の記号が入っていないところには改行させない」というものです。

 

word-break: break-allで改行を許可させる

「スペースや記号が入っていないところには改行させない」ルールを突破するにはword-break: break-allをつければOKです。

 

これで英文(メールアドレス)が自動的に改行されるようになりました。
widthで幅も自由に指定することができます。

 

 レスポンシブでtableのレイアウトを維持する

tableにtable-layout: fixedで、widthで指定した値で固定して表示できます。
さらにwidth: 100%ではみ出させないようにします。

 

これでだいたいOKだと思います。
あとは必要に応じてborder-collapse: collapseや border-spacing: 0でデザインを整えると完成です。

コメント

タイトルとURLをコピーしました