隱藏長文本與浮動權

我有數據列表需要顯示這樣的隱藏長文本與浮動權

.mycontent-bottom { 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
#float-right{ 
 
    float: right; 
 
}

<div class="mycontent-bottom"> 
 
    <a href="">Title</a> 
 
    <span id="float-right">50000</span> 
 
</div> 
 
<div class="mycontent-bottom"> 
 
    <a href="">lorem ipsum yang lazim digunakan adalah: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</a> 
 
    <span id="float-right">50000</span> 
 
</div>

問題是第二個，如果文本太長，這將推動數字在底部邊界之外。任何想法如何隱藏長文本，這樣的數字會保持在正確的，不會被推到境外？

來源

2017-01-23 Tom Kur

我無法複製此，個人。似乎在[JSFiddle]（https://jsfiddle.net/barLmu03/）中工作得很好，無論文本長度如何。你能提供一些清晰度嗎？ **編輯：**更正，對於像我這樣困惑的人。如果浮動數字在文本的最後一行，它實際上被推下。 – Santi

在我的問題中有上面的JsFiddle鏈接 –

我看到你的例子，但是我的數字並沒有被推到邊界以下。我能夠通過獲得足夠的文字來填充空間來複制它。你的問題是你在'float'之後沒有包含'clear：both;'**。 – Santi

你可以試試這個：

https://jsfiddle.net/Lboxddh9/5/

.mycontent-bottom { 
    border-bottom: 1px solid #ccc; 
    display: inline-block; 
    width: 100%; 
} 
#float-right{ 
    float: right; 
}

而且，你不應該在一個頁面上的多個元素使用相同的id秒。

這就是爲什麼，這將是正確的，而你的原始標記是無效的。

<div class="mycontent-bottom"> 
    <a href="">Title</a> 
    <span class="float-right">...</span> 
</div> 
<div class="mycontent-bottom"> 
    <a href="">...</a> 
    <span class="float-right">...</span> 
</div>

更新撥弄class而不是多個id S：

https://jsfiddle.net/Lboxddh9/7/

來源

2017-01-23 21:30:10

隱藏長文本與浮動權

回答

相關問題