背景溢出

Question

我想实现以下结果，无需硬编码填充和边距。背景应该自动获取文本的大小。如果没有 padding-margin hack，文本的扩展部分就没有背景。

没有鼠标悬停：

鼠标悬停：

实际代码：

.card-footer div:first-child
{
    float: left;
    max-width:200px;
    white-space:nowrap; 
    overflow:hidden;
    text-overflow:ellipsis;
}

.card-footer:hover div:first-child
{
    overflow:visible;
    background-color: gold;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: -2px;
    margin-bottom: -2px;
    padding-right: 350px;
    margin-right: -350px;
}

HTML（来自黄牌）：

Answer 1

您可能有一个内联元素继承背景属性：

p {
  background: yellow;
  border: solid;
  width: 200px;
  white-space: nowrap;
  padding: 0.5em;
}

span {
  background: inherit
}

<p><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span></p>

没有文本溢出规则的代码段，这是您的悬停样式。

背景溢出

Overflow with background

css

margin

overflow

padding

hover