Tràn cho màu nền của văn bản

Question

Tôi đã áp dụng màu nền cho các liên kết trong danh sách quốc gia của tôi. Nó hoạt động tốt trong chung:

Tuy nhiên, đối với các nước có tên dài hơn, nó không hoạt động rất tốt.

Tôi đang cố gắng để làm cho vàng tràn màu tất cả mọi thứ và hiển thị tên đầy đủ của đất nước rõ ràng.

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

Bạn có thể làm điều này bằng cách gói nội dung của .flagColumn trong một yếu tố bổ sung, thiết lập nó để display: inline-block; và thiết lập nền trên thay vào đó:

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