文本的背景顏色溢出

Question

我將背景顏色應用於我的國家/地區列表中的鏈接。它的工作原理以及一般：

然而，對於有較長名的國家中，它並不能很好地工作。

我試圖讓黃顏色溢出的一切，清楚地表明國家的全名。

HTML：

<div class="flagList"> 
<div class="flagColumn"> ... </div> 
<div class="flagColumn"> ... </div> 
<div class="flagColumn"> ... </div> 
... 
</div> 

CSS：

.flagColumn { 
    width: 33%; 
    float: left; 
    border:0px solid; 
    height:1.6em; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
    z-index: 1; position:relative; 
} 

.flagColumn:hover { 
    overflow:visible; 
    z-index: 2; position:relative; 
    display: inline; 
    background-color:yellow; 
} 

Answer 1

您可以通過包裝的.flagColumn內容在一個額外的元素，將其設置爲display: inline-block;和設置背景做代之以：

.flagColumn { 
 
    float: left; 
 
    height: 1.6em; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    width: 33%; 
 
    z-index: 1; 
 
} 
 
.flagColumn:hover { 
 
    overflow: visible; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.flagColumn:hover span { 
 
    background-color: yellow; 
 
    display: inline-block; 
 
    height: 100%; 
 
}

<div class="flagList"> 
 
    <div class="flagColumn"><span>This is test text!</span></div> 
 
    <div class="flagColumn"><span>This is a lot longer test text! This is a lot longer test text!</span></div> 
 
    <div class="flagColumn"><span>This is a lot longer test text! This is a lot longer test text!</span></div> 
 
</div>

JS小提琴：http://jsfiddle.net/hL9qfuvb/1/