Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make text in one line inside label with bootstrap columns?

Below label text is going in two lines.

How can I make label in one line without changing bootstrap columns as implemented below.

labels.html

<div class="form-group col-md-6 fieldHeight">
    <label for="erh" class="col-md-5 required">Enterprise Reporting Hierarchy:</label>
    <div id="multiDropDownDiverh" class="dropdown col-md-7">
        <input type="text" class="form-control" id="erh" ng-model="nonPersistentProcess.erhKey">
    </div>
</div>
like image 876
aftab Avatar asked Dec 04 '25 17:12

aftab


1 Answers

Bootply : http://www.bootply.com/Pf86x2BEhn

HTML :

<div class="form-group col-md-6 fieldHeight">
    <label for="erh" class="no-space-break col-md-5 required">Enterprise Reporting Hierarchy:</label>
    <div id="multiDropDownDiverh" class="dropdown col-md-7">
        <input type="text" class="form-control" id="erh" ng-model="nonPersistentProcess.erhKey">
    </div>
</div>

Just add this Css :

.no-space-break{
    white-space:nowrap;
  }

Another example with ellipsis : http://www.bootply.com/VRTxn5yiGH

Css :

.no-space-break{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
  }
like image 181
BENARD Patrick Avatar answered Dec 06 '25 11:12

BENARD Patrick



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!