文本溢出，产生不需要的底部填充

Question

<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;
}

http://jsfiddle.net/sjf96fpp/

出于某种原因，当我给.child-text一个隐藏的溢出时，它会给我一个不需要的底部填充。请检查jsfiddle链接以了解我的意思。如果删除overflow:hidden;填充将消失。

Answer 1

新编辑

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

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

查看演示

有关更多详细信息，请查看此堆栈溢出

Answer 2

我可以知道你想实现什么吗？

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

㞖。

您可以尝试以下操作：

<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;
}

我分别添加了 70% 和 30% 的宽度，以便两者都保持在一行上。这可以防止子价格被推到下一行。如果我正确回答了您的问题，请告诉我。