隐藏带有向右浮动的长文本

Question

我有数据列表需要这样显示

.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>

问题是第二个，如果文本太长，它会将数字推到底部边框之外。有什么想法可以隐藏长文本，使数字保持在正确的位置并且不会被推到边界之外吗？

Answer 1

你可以试试这个：

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>

已将 fiddle 更新为 class 而不是多个 id：

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

隐藏带有向右浮动的长文本

Hide long text with float right

html

css

css-float