避免跨度浮動與文本正確重疊（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）

回答

相關問題