I am trying to get labels to not wrap in Bootstrap3 but can't seem to get it to work.
I tried placing 'word-wrap: break-word' even on the label but that doesn't seem to break the label's sentence either.
I did see in the documentation to 'Wrap labels and controls in .form-group for optimum spacing.' but I cannot use 'form-group' i think if I want to use bootstrap divs to control grid/form layout of the labels/answers separately (the labels/inputs are more mobile friendy and expand to 100% of the screener when on xs screens, but on sm+ screen the labels show up left of the input to save screen space).
Here is an example... Expand the jsfiddle's right side frame very big and then you see the form labels get placed on the left with right text-alignment and the issue occuring then.
http://jsfiddle.net/armyofda12mnkeys/nud64aq7/
Pic below of the 3rd label which doesn't wrap:
Here is the basic code I use for that label/input setup:
<div class="col-xs-12 col-sm-4 label">
<label for="firstname">House Number and Street and longer label and longer label and longer label and longer label and longer label </label>
</div>
<div class="col-xs-12 col-sm-8 answer">
<input type="text" class="form-control" placeholder="Enter your house # here" />
</div>
Go to Picture Format or Shape Format and select Arrange > Wrap Text. If the window is wide enough, Word displays Wrap Text directly on the Picture Format tab. Choose the wrapping options that you want to apply. For example, In Line with Text, Top and Bottom, and Behind Text.
If you look through the DOM elements in your Fiddle you will see this code for the label
:
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Just remove the property or overwrite the white-space: nowrap;
or set the property to normal
Update 1.0: Just to clarify this CSS property only exists in Bootstrap v3. In v4.x the white-space
property has been removed from label
elements.
Update 2.0: People have been asking about BS v4.1 and looking through their code the label
wraps like normal text and doesn't not contain a white-space
property. However I did notice in the input group section that some of the classes being used do contain white-space: nowrap
(i.e. input-group-text
class). The fix would be the same, overwrite the property in a separate file or edit that specific class to use white-space: normal
. If its happening in a different section that I dont see let me know in the comments and I'd be happy to take a look!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With