Html 文本溢出导致不需要的底部填充 你好 $50 .子文本， .儿童价格{ 显示：内联块； } .儿童文本{ 溢出：隐藏； 文本溢出：省略号； 空白：nowrap； } .儿童价格{ 浮动：对； }

---

出于某种原因，当我给

.child text

一个隐藏的溢出时，它会给我一个不需要的底部填充。请查看JSFIDLE链接以了解我的意思。如果删除

溢出：隐藏填充将消失。
新编辑

添加
vertical align:top
，如下所示：

<div class="parent">
    <div class="child-text">Hello</div>
    <div class="child-price">$50</div>
</div>

.child-text,
.child-price {
    display: inline-block;
}
.child-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.child-price {
    float: right;
}

检查

有关更多详细信息，请查看此
我可以知道您想要实现什么目标吗

是否要在一行上显示子文本和子价格？左边是子文本，右边是子价格

如果是的话

您可以尝试以下方法：

.child-text {    
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: top;
}


Lorem ipsum dolor sit amet，一位杰出的领导者，一位伟大的领袖
暂时性的劳工和财产损失。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，还必须为动物的劳动负责
$ 500.00
.家长{
边缘顶部：50px；
背景：灰色；
}
.子文本，
.儿童价格{
浮动：左；
}
.儿童文本{
宽度：70%；
高度：18px！重要；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
文本对齐：左对齐；
}
.儿童价格{
宽度：30%；
文本对齐：右对齐；
}

我分别增加了70%和30%的宽度，使两者保持在一条线上。这可以防止子价格被推到下一行。如果我没有弄错你的问题，请告诉我。
刚刚意识到它根本没有隐藏过多的文本。糟糕…是的，这就是我试图实现的，但是我希望价格100%可见，不管它有多少位数，并留下标题栏的其余部分（如果名称太长，应该将其截断）。在您的示例中，价格限制为块宽度的30%。不过您可以尝试将价格宽度增加到更合理的价格范围。让它像50%为双方或60%为价格和40%为文字。我希望有人在那里可以解决您的关注动态调整的最大宽度的子文本取决于宽度或长度的子价格。虽然我的例子至少可以解决子文本不被截断和子价格被推下行的问题。据我所知。为了达到截断效果。你需要为特定的元素定义一个宽度。也许在这段时间内，直到你找到一个更好的解决方案。您可以尝试为相应的s应用40%的子文本和60%的子价格。我希望我在某种程度上帮了你的忙。我想我会尝试玩显示器：桌上电池。谢谢你的帮助，谢谢你的回答。然而，无论是我的小提琴还是你的小提琴都不会因为某种原因而截断文本。。
<div class="parent">
    <div class="child-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod     
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
    <div class="child-price">$ 500.00</div>
    <div style="clear: both"></div>
</div>

.parent {
    margin-top: 50px;
    background: gray;
}

.child-text,
.child-price {
    float: left;
}

.child-text {
    width: 70%;
    height: 18px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.child-price {
    width: 30%;
    text-align: right;
}