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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

失敗

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

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

text-overflow – CSS | MDN
[css]
p {
white-space: nowrap;
width: 100%; /* IE6 では width の指定が必要 */
overflow: hidden; /* "overflow" の値は "visible" 以外のものを指定する */

text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
}
[/css]

使用html

[html]
<div class="tablecell">
<ul>
<li class="left">左</li>
<li class="right"><p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右石右右右右右右右右右右右右右右右右右右右右右右右右</p></li>
</ul>
</div>[/html]

使用css

[css]
.tablecell{
display: table;
width: 400px;
margin: auto;
border: 10px solid #000;
}
.left,.right{
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
padding: 1rem;

}
.left{
width: 100px;
text-align: center;
background: #999;

}
.right p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:100%;
}
[/css]

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

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

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

成功

まとめ

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメント

  1. スーパーコピー ランキング iphone より:

コメントを残す


You can add images to your comment by clicking here.