html - 溢出 :Visible outside the container

Question

我有一个固定宽度的 div，里面有一段。

演示: 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;        
}

但似乎只有文本使用了 overflow: visible，而没有使用背景色。 有什么办法可以实现吗？

注意:我无法更改 div。

Answer 1

段落是 block 元素——它们占用容器的宽度，而不是它们的内容。所以你可以尝试这样的事情

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