【CSS】tableタグのtd中でURLなどアルファベット文字列を改行させたい場合の書き方

2013/01/02 2019/01/08

tebleのtdタグの中でURLなど、アルファベットや記号が連続している場合、テーブルの横サイズを500px等に指定していても（自動的に）改行せず、横サイズいっぱいまで続いてしまうことがしばしばあります。
このような場合に自動改行させるCSSをご紹介します。

table中の長いURLを改行させる

↑ 横を 500px と指定しても、改行しない

↑ この様に、500px で改行させたい場合のCSS

table {
  word-break: break-all;
  word-wrap: break-word;
}

table {

word-break: break-all;

word-wrap: break-word;

}

これで良い感じに自動改行してくれるはず。

[tgAmazonItemLookup asin="4839941874" related="1"]

: HTML5+CSS3で構築する際のIE9以下への対策

システムを作成する際の確認する人のポリシー(？)でIEのバージョンが8という困ったことになったので、これはいい機会だと捉え、HTML5+CSS3対策の実験台となってもらいましたｗ

: 【CSS】縦幅サイズがわからない要素の縦中央にテキストを配置する方法

heightがわからないボックスの中にテキストを縦方向中央に配置する方法を備忘録としてポストします。

: 【CSS】CSSのみでマウスオーバーしたテーブル行の背景色を変更する方法

HTMLで縦に長いテーブルを組んだ時など、カーソルがどこにあるのかよく分からなくなる事がたまにあるので、マウスカーソルがある行の背景色をCSSの設定のみで変更する方法を紹介します。

: 【CSS】CSSでWEBサイトのフォントを「メイリオ」にする方法

個人的に「メイリオ」フォントが好きです。WEBサイトを作る時は表示にメイリオを使うようにするので、そのタグを忘備録としてポストします。

: 【CSS】backgroundプロパティのまとめ

CSSの背景関係を指定するプロパティですが、一括指定の方法をよく忘れるので、一度、backgroundプロパティに整理してみます。