Css 背景溢出

我希望在没有硬编码的填充和边距的情况下实现以下结果。背景应该自动获得文本的大小。 如果没有填充边距，文本的扩展部分就没有背景

不带鼠标盖：

使用鼠标盖：

实际代码：

.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（来自黄牌）：

---

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

p{
背景：黄色；
边框：实心；
宽度：200px；
空白：nowrap；
填充：0.5em；
}
跨度{
背景：继承
}

---

佩伦茨克的居住者莫比·特里斯蒂克·塞内特斯和内特斯·马莱苏达·法默斯·塔皮斯·埃吉斯塔斯。

html在哪里？这会很有帮助。我添加了一张HTML图片，但它是由Salesforce VisualForce生成的HTML。这会严重影响您将来的布局。也许您应该投入一些时间来研究工具提示解决方案，或者只使用

title

属性在悬停时显示全文。另一种方法是将内容元素设置为

位置：绝对也悬停，所以它不会在周围移动其他框。它不会影响其他内容，使用填充和边距解决方案效果良好。但它是硬编码的，没有自我调节。我怎样才能覆盖零点？@DavidRenz补充：位置：相对于另一个跨度，它会把它带到前面