溢出文本的背景颜色

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;并在其上设置背景来实现此目的：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JS小提琴： http://jsfiddle.net/hL9qfuvb/1/