カテゴリー: CSS3

display: table-cell;内にtext-overflow: ellipsis;で「…」付けようとしたらwidthが消えちゃった話。

失敗

display: table-cell;で縦中央させてる要素内のテキストに
text-overflow: ellipsis;で「…」付けようとしたらwidthが消えちゃった。

text-overflow: ellipsis;で「…」付ける為の条件

text-overflow – CSS | MDN

使用html

使用css

こうすると.leftのwidthが消滅するという現象が起きた

IE6で必要って書いてあるwidthを逆に消せばいいのか?と
.right pのwidthを消しても駄目だった。

次にpxで指定してみたら「…」が表示され.leftのwidthも復活した

成功

まとめ

text-overflow: ellipsis;側のwidthはpxで指定する。


横幅が変動する要素をセンタリングする。

センタリング

通常、ブロック要素をセンタリングさせるには

1)横幅を指定
2)左右のmarginをauto

するけど
横幅を指定しちゃうから、内容に合わせて横幅が伸縮するような要素をセンタリングさせられません。

けど、widthの代わりにdisplay:tableを使うと
横幅が変動する要素をセンタリングが可能にッ!!!

display:table;はIE8も理解してくれます


html,body{height:100%}でブラウザー表示領域一杯まで広げたブロック要素に、余白やborderを含ませつつ100%におさめる方法

こんな感じのレイアウト

box-sizingでheight100%のブロック要素にラインを引く

tableを使わないと不可能だと思ってたけど普通にできちゃうんだねぇ
サンプル

css3のbox-sizingを使った

box-sizing-CSS3リファレンス

どっちにしろmarginは含ませる事は出来ないのでレイアウトによってはちょっとした工夫や無駄な要素が必要になるかも。

対応ブラウザ

firefox以外のモダンブラウザーには実装済みで
そのfirefoxもベンダープレフィックスをつければ使える。

ブラウザ確認したバージョンベンダープレフィックス
safari5.1.2不要
chrome20.0.1132.52m不要
firefox13.0.1必要(-moz-box-sizing: border-box;)
opera11.64不要
IE9不要
IE8不要

他の手段を使って同じように組む事も出来るのかな?