文本的背景颜色溢出

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/