CODEWITHSUNDEEP
csshoveroverflowmarginpadding
David Renz
David Renz

Reputation: 375

Overflow with background

I want to achieve the following result, without hard coded padding and margin. The background should automatically get the size of the text. Without the padding-margin hack the extended part of the text has no background.

without mouseover: without mouseover

with mouseover: with mouseover

actual code:

.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 (from the yellow card):

HTML

Upvotes: 0

Views: 72

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105903

you may have an inline-element inheriting background properties:

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>

snippet without text-overflow rules, this is your hover style.

Upvotes: 2

Related Questions