Bootstrap label class not wrapping

Question

I'm performing an ng-repeat of labels

<span class="label label-primary" style="margin-right:5px;" ng-repeat="a in data.tags">{{a.tagName}}</span>

If the output is many labels, it goes off the screen, instead of wrapping responsively according to the col-md size i have it in.

see example: http://www.bootply.com/119412

What gives?

Thanks!

It could be helpful if you post more complete code though since the issue is related to that. — Dan, Mar 05 '14 at 21:38
if you're using bootstrap 3, you need to use class="row" instead of class="span12" and you'll likely want to specify the size of each span using class="col-md-X" where X is how many columns to span. — Brocco, Mar 05 '14 at 21:50

score 10 · Accepted Answer · answered Mar 06 '14 at 14:14

10

Changing display:inline to inline-block fixed this.

<span class="label label-primary" style="margin-right:5px; display:inline-block" ng-repeat="a in data.tags">{{a.tagName}}</span>

answered Mar 06 '14 at 14:14

user2827377

1,381
2
16
26

Kasey Speakman · Answer 2 · 2016-05-13T15:39:11.917

I tried using display: inline-block but it changed the look of the label padding in Bootstrap 3.

So I investigated a little further. The issue is that there is no space between the labels, so there is nothing to wrap on. An easy fix is to enclose the label in another span and put a space before or after the inner span.

<span ng-repeat="a in data.tags"> 
    <span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span> 
</span>

The whitespace due to formatting in front of the inner space suffices for a wrapping point. If you were to put it all in one line, you'd need to add a conspicuous space.

<!--                             _ conspicuous -->
<span ng-repeat="a in data.tags"> <span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span></span>

Without the space above, the labels will not wrap.

I also tried various ::after { content: ' '; white-space: normal } strategies. Putting that on the label itself did trigger wrapping, but it cuts off the end of the label that wraps. It still required an outer span to be visually correct. Although at least with a class, it is explicit that the container's purpose is to trigger wrapping:

<style>
.wrappable::after { content: ' ' } /* content: '' wraps too */
</style>
<span class="wrappable" ng-repeat="a in data.tags"><span class="label label-primary" style="margin-right:5px;">{{a.tagName}}</span></span>

Reasons

It's a bit annoying that you have to change the structure of your document to get this obviously expected result. However, I believe this is a consequence of the labels themselves being white-space: no-wrap. (There is good reason for labels to be set this way... otherwise, words inside a label could break across lines.) The browser sees a bunch of no-wrap elements with no breaking space between them. So it makes a logical conclusion that the elements should not be broken up at all. The alternative to make labels render "correctly" is to make labels a multi-element structure (which is what the above is doing) to encapsulate the non-wrappable element in a wrappable one. But this is not ideal because the container element would be redundant in many cases.

score 0 · Answer 3 · answered Nov 12 '14 at 20:01

The answer worked for me. I went ahead, and added it to my label-spaced class as labels within a repeat doesn't have proper spacing. See my class below:

.label-spaced {
    margin-right:5px;
    margin-bottom:5px !important;
    display:inline-block;
}

score 0 · Answer 4 · answered Apr 17 '17 at 20:01

0

I'm a bit late to the game, but this worked for me (only tested in Firefox):

<span class="label label-default" ng-repeat-start="tag in select.selectedTags">
  {{tag}} <i class="fa fa-times fa-fw cursor-pointer"></i>
</span>
<bwr ng-repeat-end />

answered Apr 17 '17 at 20:01

Aaron Tyler

161
1
2

Bootstrap label class not wrapping

4 Answers4