html - CSS 溢出 :hidden causing extra bottom margin

Question

我有一个带有表单字段和标签的 Bootstrap 行。如果标签文本换行超出其输入的宽度，我试图实现省略号效果。我的 CSS 似乎工作正常，但是在将 overflow: hidden 样式应用于标签时，我得到了额外的底部边距。有谁知道这是什么原因以及如何解决？

<div class="row">
    <div class="col-sm-3">
        <div class="form-group">
            <label>Carrier</label>
             <input class="form-control"  type="text">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label class="ellipsis">Type of Coverage (PPO, HMO, Indemity, deductibles/copays)</label>
             <input class="form-control"  type="text">
        </div>
    </div>
    <div class="col-sm-3">
        <div class="form-group">
            <label>Period in Effect</label>
             <input class="form-control"  type="text">
        </div>
    </div>
</div>


.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}

Fiddle

Answer 1

问题不在于溢出:隐藏，而在于标签元素的显示:内联 block :

label {
    display: **inline-block;**
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

将其更改为 display: block，它会修复它。

label {
    display: **block;**
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

另一个修复方法是将特定标签 .ellipsis 垂直对齐到底部，而不是覆盖默认的 Bootstrap 类:

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    vertical-align:bottom
}

取决于哪种解决方案最适合您。