溢出为文本的背景颜色 [英] Overflow for background color of text

问题描述

我将背景颜色应用于我的国家/地区列表中的链接。一般来说，效果很好：

I applied background color to the links in my country list. It works well in general:

但是，对于名称较长的国家，它的工作效果不佳。

However, for the countries which have longer name, it doesn't work very well.

img src =https://i.stack.imgur.com/Wd5ba.pngalt =enter image description here>

我想要黄色溢出一切，并清楚显示国家的全名。

I'm trying to make the yellow color overflow everything and show country's full name clearly.

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;

You can do this by wrapping the content of .flagColumn in an extra element, setting it to display: inline-block; and setting the background on that instead:

.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小提琴： http：// jsfiddle。 net / hL9qfuvb / 1 /

这篇关于溢出为文本的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！