避免跨度浮动与文本正确重叠（CSS）

我正在使用人力车并且有一个图形悬停/注释，其中颜色样本（使用<span>与其中包含的<div>中的文本重叠）。避免跨度浮动与文本正确重叠（CSS）

这里是我的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，它也显示该问题。

来源

2014-02-12 Luke

添加填充，然后绝对定位'.detail_swatch'：http://jsfiddle.net/KWt4C/4/ – Moob

您可以将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-12 16:57:59

如果你想要的元素在一个固定的宽度你可以使用text-overflow: ellipsis

jsfiddle

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

来源

2014-02-12 16:59:26 enyce12

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

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

来源

2014-04-29 07:34:53

避免跨度浮动与文本正确重叠（CSS）

回答

相关问题