我将背景颜色应用于我的国家/地区列表中的链接.它一般运作良好：
但是,对于名字较长的国家来说,效果并不好.
我试图让黄色溢出所有东西并清楚地显示国家的全名.
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;
}
解决方法
你可以通过将.flagColumn的内容包装在一个额外的元素中,将其设置为显示：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>
