CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
noclist
noclist

Reputation: 1819

css overflow:hidden causing extra bottom margin

I have a bootstrap row with form fields and labels. I'm attempting to achieve an ellipsis effect if the label text wraps beyond the width of it's input. My css seems to be working correctly however I'm getting an extra bottom margin when applying the overflow: hidden style to the label. Does anyone know the reason for this and how to solve it? 

<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

Upvotes: 1

Views: 921

Answers (1)

August
August

Reputation: 2113

The issue is not with overflow: hidden but with display: inline-block of the label element:

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

change it to display: block and it will fix it.

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

Another fix is to vertical align that particular label, .ellipsis, to bottom instead of overwriting default class of bootstrap:

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

Depends which solution fits you best.

Upvotes: 4

Related Questions