Überlauf für die Hintergrundfarbe des Textes

Question

Ich habe Hintergrundfarbe auf die Links in meiner Länderliste angewendet. Es funktioniert gut im Allgemeinen:

jedoch für die Länder, die mehr Namen haben, ist es nicht sehr gut funktionieren.

Ich versuche, die gelbe Farbe Überlauf, alles zu machen und deutlich Landes vollständigen Namen zeigen.

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

Sie können dies tun, indem Sie den Inhalt des .flagColumn in einem zusätzlichen Element Einwickeln, es zu display: inline-block; Einstellung und die Hintergrundeinstellung auf dass stattdessen:

.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 Fiddle:http://jsfiddle.net/hL9qfuvb/1/