自动换行所有文本并适合div以适合孩子的大小？

Question

I have the following html code:

<div class="container">
    This is just some text. This is just some text. This is just some text.<br><br>
    <label>Input: <input type="text"></label>
</div>

I need the div to be the width of the <label> and the text to wrap.

Without the text, I can make .container inline-block so it fits to the label, but it will otherwise stretch with the text.

Is this possible?

Answer 1

The following example uses CSS to accomplish this: display: table-caption; on the div , and white-space: nowrap; on the label .

Click the "Run code snippet" button below to see how it actually renders. (It's just HTML with embedded CSS; no JavaScript.)

 <div class="container" style="display: table-caption;"> This is just some text. This is just some text. This is just some text.<br><br> <label style="white-space: nowrap;">Input: <input type="text"></label> </div>