Metnin arka plan rengi için taşma

Question

Ülke listemdeki bağlantılara arka plan rengi uygularım. Bu genel olarak iyi çalışır:

Ancak uzun isme sahip ülkeler için, çok iyi çalışmaz.

Ben sarı renk taşma her şeyi yapmak ve açıkça ülkenin tam adı göstermeye çalışıyorum.

HTML:

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

CSS: Sen display: inline-block; ayarlayarak, fazladan eleman .flagColumn içeriğini sarma ve üzerinde arka plan ayarlama yapabilirsiniz

.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

bunun yerine:

.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/