根据其内容包装div

Question

div的宽度为100％，因此右侧还有很多额外的空间。我希望div将文本包装在其中，即在块中不应留有多余的空间。如何实现？

<div style="border: 1px solid black;">
  Hello there!
</div>

Answer 1

尝试display: inline-block：

<div style="border: 1px solid black;display: inline-block">
  Hello there!
</div>

<div style="border: 1px solid black;display: inline-block;border: solid">
  Hello there!
</div>

Answer 2

您可以使用display: inline-flex

<div style="border: 1px solid black; display: inline-flex">
  Hello there!
</div>

如果您对flex及其用途不熟悉，我建议您看一下https://css-tricks.com/snippets/css/a-guide-to-flexbox/

很好的参考，了解使用flexbox的功能

Answer 3

似乎您想让div的完整文本保留在div中而不是给scroll，因此您可以使用：

word-wrap: break-word;