溢出：在容器外部可见

Question

我有一个带有段落的固定宽度div。

DEMO： http://jsfiddle.net/HrasZ/1/

该段落的样式为以下css：

p {
    white-space: nowrap;
    overflow: hidden;
    background: grey;
    color: white;
    text-overflow: ellipsis;        
}

我想添加新的css类p：hover，并在悬停时显示所有隐藏的文本。

p:hover {
    white-space: nowrap;
    overflow: visible;
    background: grey;
    color: white;        
}

但似乎只有文字使用溢出：可见，但不是背景颜色。 有没有办法实现这个目标？

注意：我无法用。更改div。

Answer 1

段落是块元素 - 它们占用容器的宽度，而不是它们的内容。所以你可以试试这样的东西

p:hover {
    display:inline-block;
    white-space: nowrap;
    overflow: visible;
    background: grey;
    color: white;        
}