【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"]

: 【CSS】jQueryで切り替えるシンプルデザインのタブ装飾で下線を表示しないように工夫してみた

切り替えたときにどうやって「タブの下の線」を消せばよいのか試行錯誤した結果を備忘録としてポストします。

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

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

: 【CSS】改行が入っても文字の頭をそろえる（2行目以降を1文字下げる）方法

箇条書きや注釈に「・」や「※」をよく使うと思いますが、改行すると記号が回りこんで埋もれてしまいがちです。
今回は記号ではありませんが、利用規約をHTML化する作業をしていた時に「(1)」などがやはり回りこんでいたのが非常に気になったので、それを回避、揃える方法を備忘録としてポストします。

: 【CSS】擬似要素を使って選択済みラジオボタンの背景色を変更する方法

以前ラジオボタンの背景色を制御するスクリプトをjQueryで作成したのですが、ラジオボタンを大量に設置するとブラウザが反応しないという事態に陥ったので、CSSの疑似要素を使って制御する方法を紹介します。

: 【CSS】リストの奇数・偶数・指定番目などを指定して装飾する方法

リストの奇数・偶数・指定番目などを指定して装飾する方法を備忘録としてポストします。