html – 文本背景颜色的溢出

<div class="flagList">
<div class="flagcolumn"> ... </div>
<div class="flagcolumn"> ... </div>
<div class="flagcolumn"> ... </div>
...
</div>@H_607_9@ 
 
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;
}@H_607_9@

你可以通过将.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%;
}@H_607_9@ 
 
<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>@H_607_9@ 
 
JS小提琴：http://jsfiddle.net/hL9qfuvb/1/