Question

我有一个带有表单字段和标签的引导行。如果标签文本超出了它的输入宽度，我试图获得省略号效果。我的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

问题不在于overflow：hidden，而是带有display：标签元素的inline-block：

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

将其更改为显示：阻止，它将修复它。

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

另一个解决方法是将特定标签.ellipsis垂直对齐到底部，而不是覆盖默认的引导类：

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

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

css overflow：隐藏导致额外的底部边距

1 个答案: