有背景的溢出答案

【问题标题】：Overflow with background有背景的溢出
【发布时间】：2015-07-01 16:23:43
【问题描述】：

我想实现以下结果，没有硬编码的填充和边距。背景应该自动获得文本的大小。如果没有 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（来自黄牌）：

【问题讨论】：

html 在哪里？这会很有帮助
我添加了 HTML 的图片，但它是从 Salesforce Visualforce 生成的 html
这会严重影响您未来的布局。也许您应该花一些时间研究工具提示解决方案，或者只使用title 属性在悬停时显示全文。另一种方法是在悬停时也将内容元素设置为position: absolute;，这样它就不会移动其他框。
它不会影响其他内容，并且使用填充和边距的解决方案可以正常工作。但它是硬编码的，不会自行调整。

标签： css hover overflow margin padding

【解决方案1】：

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

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

span {
  background: inherit
}

&lt;p&gt;&lt;span&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/span&gt;&lt;/p&gt;

sn-p 没有文本溢出规则，这是你的悬停风格。

【讨论】：

我怎样才能覆盖零？
@DavidRenz add : position:relative to the other span ，它将把它放在前面