【问题标题】:Overflow for background color of text文本背景颜色溢出
【发布时间】:2014-12-30 06:30:01
【问题描述】:

我为国家列表中的链接应用了背景颜色。总的来说效果很好:

但是,对于名字比较长的国家,效果就不太好了。

我试图让黄色溢出一切,并清楚地显示国家的全名。

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

【问题讨论】:

  • 我会建议你使用 HTML 表格。他们将正确地格式化行和列。表格的格式也会很好。查看本教程以开始使用:link

标签: html css overflow background-color


【解决方案1】:

您可以通过将.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 小提琴: http://jsfiddle.net/hL9qfuvb/1/

【讨论】:

    猜你喜欢
    • 2016-01-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-13
    • 1970-01-01
    • 1970-01-01
    • 2023-04-10
    相关资源
    最近更新 更多