またレイアウトが崩れている
https://nisezo.com/archives/5119
URLが自動改行されないことでレイアウトが崩れたので、
そのためのword-wrapプロパティをCSSに書き込もうと思いました。
ところが既に書いてあった。名称違いのoverflow-wrapまで。
じゃあ何で効いてないんだろうと思って調べたらこれが出ました。
長いURLや英単語の途中でも自動改行させるCSS(3ページ目)
https://allabout.co.jp/gm/gc/463542/3/
これは記事の3ページ目なんですけど、
「table-cellを使った段組構造でword-wrapが効かない場合」とあります。
table-cell名指し。
そのまま引用すると、一番外側にあたるtable要素にこういう処理をするみたい。
.cover {
display: table;
width: 100%; /* (1)外側の横幅を指定した上で */
table-layout: fixed; /* (2)レイアウトを固定する */
}
ウチの場合はこうなのかなと
div#contents-container{
width: 100%;
display: table;
table-layout: fixed; ←←←
box-sizing: border-box;
}
ただこれ、うちのソースを見てもらうとわかるんですけど、
contents-containerは中央の3カラムのガワであって、
これにヘッダーとフッターを加えた最外郭のcontainerてやつがいるので、
そいつにつけたほうがいいのかもしれない。
その場合こうなる
div#container {
width: 90%;
table-layout: fixed; ←←←
min-width: 800px;
background-color: #ffee99;
margin-left: 5%;
margin-right: 5%;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
なんでこれ幅が％なのに左右に％でマージン入れてんだろ…？
まあそれは置いといてこれをやってみると、これが全然ダメ。
contents-containerに入れたら効くけど、最外郭に入れても全然効果なし。
というのも名前の通りtable-layoutはtableの表示を指定するプロパティなので、
display: table;と同じ要素につけてやらないとダメみたい。
すごい初歩的っぽいですけど。
そんなわけでURLでレイアウト崩れる問題解決。
原因になったURLを下に書くのでトップページ（3カラム）で自動改行されてたらOKですよ…
http://arcadia11.hatenablog.com/entry/2018/03/13/224433