與背景溢出

我想實現以下結果，沒有硬編碼的填充和邊距。背景應該會自動獲得文本的大小。沒有填充邊距黑客文本的擴展部分沒有背景。與背景溢出

無鼠標懸停： without mouseover

與鼠標懸停： with mouseover

實際代碼：

.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

來源

2015-04-23 David Renz

哪裏的html？這將有所幫助 – chrismillah

我已經添加了HTML的圖片，但是它是從Salesforce Visualforce生成的HTML –

這會在未來嚴重影響您的佈局。也許你應該投入一些時間並調查tooltip解決方案，或者只是使用'title'屬性來顯示懸停時的全文。另一種方法是將內容元素設置爲'position：absolute;'也懸停，所以它不會將其他框放在周圍。 –

你可能有一個內聯元素繼承的背景屬性：

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>

片段沒有文字溢出的規則，這是你的懸停風格。

來源

2015-04-23 13:11:51

非常感謝，這個解決方案對我來說工作得很好。 –

如何覆蓋零點？ –

@DavidRenz添加：位置：相對於另一個跨度，它會提前 –

回答

相關問題