自动换行所有文字并根据孩子的大小调整div？

Question

我有以下HTML代码：

<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>

我需要div为<label>的宽度和要包装的文本。

如果没有文字，我可以将 .container 内嵌块设置为适合标签，但是否会延伸到文本。

这可能吗？

Answer 1

以下示例使用CSS完成此操作：display: table-caption;上的div和white-space: nowrap;上的label。

单击下面的“运行代码段”按钮，查看它实际渲染的方式。 （它只是带有嵌入式CSS的HTML;没有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>