Inline-block: word was wrapped but extra space in the right side left

Asked Dec 31 '17 at 08:45

Active Dec 31 '17 at 11:33

Viewed 587 times

I need:

I have:

So, "exchequer" word was wrapped, however it left pretty wide space in spite of orange div is inline-block. CSS:

.BlockContainer{
  background: blue;  
  width: 400px;
}

.InlineBlock {
    display: inline-block;
    background: teal;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: #f5511e;
    padding: 2px 4px;
}

<div class="BlockContainer">
  <div class="InlineBlock">
    Dumpy kibitzer jingles as exchequer overflows.
  </div>
</div>

edited Dec 31 '17 at 09:06

asked Dec 31 '17 at 08:45

Takeshi Tokugawa YD

Where's the problem? https://jsfiddle.net/Liamm12/fv0jzo9k/ – Liam Dec 31 '17 at 08:48
And what do you want instead? To break the word with a hyphen? To adjust the font size? – agrm Dec 31 '17 at 08:49
2

This problem related with padding or width – Liam Dec 31 '17 at 08:50
Please share complete CSS/HTML. – sinisake Dec 31 '17 at 08:51
1

[Here is a better fiddle](https://jsfiddle.net/MrLister/fv0jzo9k/1/). Anyway, the explanation is that, by default, inline-blocks do not grow smaller as their contents grow bigger. Not sure what else there is to say. Use `width`. – Mr Lister Dec 31 '17 at 09:05
Added the complete code. – Takeshi Tokugawa YD Dec 31 '17 at 09:07
this is normal behavior. – Temani Afif Dec 31 '17 at 09:07
But why? Is inline-block's width must wrap the contains? – Takeshi Tokugawa YD Dec 31 '17 at 09:08
The inner block doesn’t shrink to fit its contents. Use float:left instead of display – Christian Dec 31 '17 at 09:12
@Christian even float won't solve the issue in this case. – Temani Afif Dec 31 '17 at 09:53
@TemaniAfif then I’m confused what he’s trying to achieve.... – Christian Dec 31 '17 at 09:57
1

@Christian I would hardly call the screenshots of "what they need" and "what they get" confusing. – Mr Lister Dec 31 '17 at 10:07
@MrLister he's simply having a normal behavior but not understanding why. And yes the screenshot cannot give the information needed, also his code too. But try to deacrease the width of outer div an you get it ;) – Temani Afif Dec 31 '17 at 10:18
@TemaniAfif Thanks :) I guess it was his confusion that was confusing me :p – Christian Dec 31 '17 at 12:05

Inline-block: word was wrapped but extra space in the right side left

0 Answers0

Linked