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

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で指定する。