javascripthtmlcssnowrap

Expand container div with content set to nowrap


I have a div that has some content in it, and set to white-space: nowrap; When this happens the div stays the same size. How can I make it so that the div will continue to wrap to the end of the content that now floats off the right of the page?

.parent {
  border: 1px dotted blue;
}
.parent p {
  border: 1px dotted red;
  white-space: nowrap;
}
<div class='parent'>
  <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
  <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
</div>


Solution

  • You can set .parent{display:inline-block;} If you want the borders to go all the way to the right of the content.

    .parent {
      border: 1px dotted blue;
      display: inline-block;
    }
    .parent p {
      border: 1px dotted red;
      white-space: nowrap;
    }
    <div class='parent'>
      <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
      <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
    </div>