我为我的国家/地区列表中的链接应用了背景色。一般情况下效果很好:
但是,对于名字较长的国家来说,效果不是很好。
我试图让黄色溢出一切,并清楚地显示国家的全名。
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
的内容包裹在一个额外的元素中,将其设置为 display: 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>
JS fiddle : http://jsfiddle.net/hL9qfuvb/1/
关于html - 文本背景颜色溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26716979/