2

我正在使用人力车并有一个图形悬停/注释，其中颜色样本（使用 a 定义）与它们都包含在<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上找到，它也显示了问题。

4

3 回答 3

4

您可以在 中添加一个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

于 2014-02-12T16:57:59.417 回答
2

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

jsfiddle

.detail .text {
    display: inline-block;
    max-width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
于 2014-02-12T16:59:26.017 回答
0

问题的根本原因是 span 是一个内联元素，它旨在内联显示。您希望包含日期的跨度表现得像块级元素，因此您选择的元素是错误的。

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

于 2014-04-29T07:34:53.407 回答