Block elements take full width when text wraps on to two lines

[ed_hollinghurst]

‘m basically just curious about this because I see it all the time and no one I have spoken to seems to know if there is a solution.

Usually when I come across this its for a fancy looking button with a background on it and is display block or inline block.

The issue is this: say you have a button inside a div that has a specific width, lets say 160px, and you have a display block or inline-block inside, if the text inside the cant all fit on one line it wraps on to two as you would expect but now that it is on two lines it no longer really needs to take up the full width of the div but it does! I’m not really that surprised that this happens but I was wondering if anyone knew of a css or even JS solution that fixes this?

Code:

Test with a longwrappingword

[Paulie_D]

I’m not sure what you are saying…the red is full width from your code.

See here: http://codepen.io/anon/pen/rxozs

Are you talking about the word wrapping?

[Senff]

@ed_hollinghurst: you mean why the red goes all the way to the right when the inner is block or inline-block?
And why it doesn’t behave like an inline? (third: http://codepen.io/senff/pen/sHxkK )

[ed_hollinghurst]

Thanks for the replies.

Ideally I was looking to achieve the red background to only span the width of the text (like what is achieved using inline) BUT where the second line isn’t as long as the first the background to still extend to the width of the first line (so it still looks like a block).

Getting the feeling this isn’t possible?

[Author]

Posts