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

检查DEMO

有关详细信息，请查看此stackoverflow

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％的宽度以保持在一条线上。这可以防止儿童价格被推到下一行。如果我的问题正确，请告诉我。

文本溢出给出了不需要的底部填充

2 个答案: