How to resize the width of a div to fit word wrap?

Question

Is it possible to resize a div element when word wrap occurs? For demonstration purposes, look at this example from a similar question:

.mypost {
  border: 1px solid Peru;
  margin: auto;
  min-width: 200px;
  display: inline-block;
  background: red;
}

.test {
  margin: 10px;
  background: cyan;
}

<div class="mypost">
  <div class="test">I represent the imagdfv fdvdsdfsdfve.</div>
</div>

If you make the window smaller so that word wrap occurs, you will see that there is a blue empty space to the right of the text. Instead, I want the blue area to decrease until it reaches the last letter of the first line.

(In this image I am forcing word wrap. I want the blue area to shrink.)

Is this possible?

Answer 1

By default div elements are block-level elements meaning they occupy 100% of the width of its parent element. As the other answer shows you can use javascript to set the width of the div according to the content.

However, if you are only concerned with constraining the background color to be within the boundaries of inline content (i.e. text and images), you could just make the element inline with the display: inline declaration. You would have to remove the margin and instead add padding to the parent element.

Here is an example I created from modifying your code. I added display: inline to .test, removed margin: 10 from .test, and added padding: 10 to .mypost. I also had to play around with line-height and font-size to make sure there is no gap between the lines.

.mypost {
    border: 1px solid Peru;
    margin: auto;
    min-width: 200px;
    width:300px;
    display: inline-block;

    background: red;
    font-size:18px;
    line-height:20px;
    
    padding:10px;
    
}
.test {
    background: cyan;
    display:inline;
}

<div class="mypost">
    <div class="test" contenteditable="true">
        EDIT ME..... Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </div>
</div>

The snippet is an interactive demo. You can directly edit the content of the div to see how word wrap behaves.

I have also found this duplicate question but it didn't have any satisfactory answers: How to remove extra space caused by word-wrap in shrunk to fit element?

Answer 2

tl;dr: No.

Once word wrapping occurs, the block-level element containing the text is considered to be as wide as possible to fill its container regardless of where the text breaks.

One can use javascript to find a minimum-width box of the starting height but this is inefficient due to repeated redraws and it's less friendly to CSS:

target = document.getElementsByClassName('test')[0];
height = target.clientHeight;
minWidth = 1;
maxWidth = target.clientWidth;
while(maxWidth - minWidth > 1) {
  var newWidth = (minWidth + maxWidth) / 2;
  target.style.width = newWidth + "px";
  if(target.clientHeight > height) {
    minWidth = newWidth;
  }
  else {
    maxWidth = newWidth;
  }
}
target.style.width = maxWidth + "px";

.mypost {
    border: 1px solid Peru;
    margin: auto;
    width: 300px;
    display: inline-block;
    background: red;
}
.test {
    margin: 10px;
    background: cyan;
}

<div class="mypost">
    <div class="test">I represent the imagdfv fdvdsdfsdfve.</div>
</div>

Answer 3

For me, I would make the inner div display: inline-block;

So:

    .mypost {
        border: 1px solid Peru;
        margin: auto;
        min-width: 200px;
        display: inline-block;
        background: red;
    }
    .test {
        display: inline-block;
        margin: 10px;
        background: cyan;
    }

    <div class="mypost">
        <div class="test">I represent the imagdfv<br/>fdvdsdfsdfve.</div>
    </div>