Make div adjust to content size after content breaks to new line?

Question

I have an inner div with max-width: 50%. The inner div contains content which may wrap to the next line. When the inner div's contents wrap to the next line, due to the inner div being > 50% the width of its parent, the div continues to have 50% the width of its parent instead of having a width that matches its newly wrapped content.

Is there a way to have the inner div's width shrink when the content wraps to a new line?

.outer {
  background-color: red;
  width: 100%;
  position: relative;
}

.inner {
  display: inline-block;
  background: blue;
  max-width: 50%;
}

<div class="outer">
  <div class="inner">I_have_50%_width even_after_line_wraps</div>
</div

Shrink to what, exactly? Like I'm failing to see what width the inner div should be after wrapping. — Jack Guy, Dec 13 '15 at 06:02
Hey @Harangue, I'm hoping to have the inner div wrap to the text _after_ it breaks to the next line, instead of having a bunch of blank space to the right. Basically, as much padding to the right of the text as there is to the left of the text. — kjb, Dec 13 '15 at 06:05

score 0 · Answer 1 · answered Dec 13 '15 at 06:09

Update your inner class with the following css.

.inner {
 display: inline-block;
 background: blue;
 max-width: 50%;
 height: auto;
 word-wrap: break-word;
}

Adding word-wrap: break word property will break words inside your div to new line. You can learn more about the word-wrap property from here.

Make div adjust to content size after content breaks to new line?

1 Answers1