Label gets cut off at the end when adding a glyphicon

[dsullivan7]

It appears that Label's get cut off at the end when there is an overflow and there is a glyphicon at the end. This appears in Safari and Chrome but not in Firefox. Related to #5376 Here is a fiddle to demonstrate:

http://jsfiddle.net/D2RLR/5533/

[nhall]

Changing the .label display from inline to inline-block would fix this but I am not sure of other implications where this would not be ideal.

[dsullivan7]

@nhall's fix solved my issue, I would recommend merging and closing this. Thanks!

[mdo]

Pretty sure this is just because you're placing an inline-block element within an inline element. I think the only logical and practical solution for this is to add something to the docs and encourage folks to change the style as they need. Moving back to inline-block doesn't feasible without affecting computer height of elements.

[mdo]

This apparently only happens because of the spacing of your HTML. See http://jsbin.com/juquh/1/. The top half is fine, and the second half is busted. This is because the top half's HTML is formatted to be more verbose (new lines, meaning rendered white space) while the bottom half is all one line without a line break or space.

[mdo]

We can't change the inline to inline-block because it affects the computed line-height, so a docs callout it is. Rough.

[nhall]

Exactly, whitespace in the HTML will lead to space around elements set to inline-block. There are a few ways to fix this, particularly when you have control over the HTML output. There's a good write up on CSS Tricks, 'Fighting the Space Between Inline Block Elements'.