ただいまバックグラウンドにて画像を加工中です。

スマホ、レスポンシブ、bootstrapでアルファベットがはみ出すcss対策

2015年4月5日更新 view: 42 view

レスポンシブデザインとかでテーブルからアルファベットがはみ出す

word-wrapとか使ってもうまく動かない場合は、どうすればいい?
そんな時の対応方法です。

みそ

  • 親要素に table-layout と width 指定
  • 要素にword-wrap
スポンサードリンク

<table style="table-layout:fixed;width:100%;">
<tr>
<td>絶対に文字列</td>
<td>はみ出させない</td>
</tr>
<tr>
<td style="word-wrap:break-word;">
https://www.google.com/url?q=https://www.google.com/url?q%3Dhttp://mobile.gungho.jp/news/pad/and_taiou.html%26sa%3DD%26usg%3DAFQjCNHlFrCWTQVvaUDee5ENbr56tNz1Tw&amp;sa=D&amp;usg=AFQjCNFQ6UsL9mncg58l71dx_IufQjaecA" target="_blank">http://mobile.gungho.jp/news/pad/and_taiou.html
</td>
<td>URL 長い単語は</td>
</tr>
</table>

これできっちりテーブル内に文字列が収まります。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

9月20日 ( 金 ) にアクセスが多かった記事はこちら!