Question

我正在使用人力车并且有一个图形悬停/注释，其中颜色样本（使用<span>定义的重叠与<div>中包含它们的文本重叠。

这是我的HTML：

<div class="detail" style="left:250px">
    <div class="item active" style="top: 200px"> 
        <span style="background-color: #30c020" class="detail_swatch"></span>
        Very very very very very long label: 67<br/>
        <span style="color:#A0A0A0">Wed, 12 Feb 2014 18:51:01 GMT</span>
    </div>
</div>

这是我的CSS：

.detail {
    position: absolute;
}
.detail .item {
    position: absolute;
    padding: 0.25em;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: white;
    white-space: nowrap;
}
.detail .item.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
}
.detail_swatch {
    display: inline-block;
    float: right;
    height: 10px;
    margin: 0 4px 10px 10px;
    width: 10px;
}

detail_swatch正确显示在右上角，但会与very very ... long label重叠。我读过这个问题的大多数解决方案涉及更改包含div的位置声明。那不是一个选择。

有什么方法可以确保detail_swatch不与文字重叠，而是扩展它们（水平）包含的div？

此代码可在JSFiddle here上找到，它也会显示问题。

Answer 1

您可以向padding-left: 15px;添加.detail .item.active {}，以确保该项目不会被文字重叠。然后我将.detail_swatch定位为绝对而不是float: right;，因此它与我添加的填充重叠。

这是改变的css：

.detail .item.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
    padding-right: 15px;
}
.detail_swatch {
    display: inline-block;
    position: absolute;
    right: 2px;
    height: 10px;
    margin: 0 4px 10px 10px;
    width: 10px;
}

最后，小提琴：Demo

摆弄非常长的文字：Demo

Answer 2

如果您希望元素处于固定宽度，则可以使用text-overflow: ellipsis

jsfiddle

.detail .text {
    display: inline-block;
    max-width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Answer 3

问题的根本原因是span是一个内联元素，它意味着内联显示。您希望包含日期的范围的行为类似于块级元素，因此您选择的元素是错误的。

解决方案很简单;使用div而不是span来包含日期并删除br。

避免span float右与文本重叠（CSS）

3 个答案: