CODEWITHSUNDEEP
htmlcssoverflowinlineword-wrap
DonFuchs
DonFuchs

Reputation: 133

inline-block not working together with overflow-wrap for divs

I have two divs that fit nicely on one line when using display: inline-block, but if one container now contains some very long word that I try to wrap with overflow-wrap and word-break, this container will move to the next line, what I want to avoid.

div {
  display: inline-block;
}

div.bar {
  overflow-wrap: break-word;
  word-break: break-all;
}
<div>foo</div>
<div class="bar">
  barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
</div>

View on JSFiddle

What I would want is this

foobarbarbarbarbarbarbarbarbarbarbarbarbarbar...
...barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar

Upvotes: 0

Views: 257

Answers (2)

Dhananjai Pai
Dhananjai Pai

Reputation: 6015

if you just want to have both the divs in the same line, consider wrapping them in a parent div with display:flex

Learn about flexbox model here

Check here:

div {
  display: inline-block;
}

div.bar {
  overflow-wrap: break-word;
  word-break: break-all;
}

div.flex-parent {
  display: flex;
}
<div class="flex-parent">
  <div>foo</div>
  <div class="bar">
    barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
  </div>
</div>

JSFiddle

Upvotes: 3

danthony
danthony

Reputation: 96

You have to give the divs a width. inline-block will take up as much space as it needs, so if its contents takes up the whole width of the viewport it acts like display:block.

Upvotes: 0

Related Questions