html - 设置 min-width float until max-width 和分词文本

Question

我有五个带有一些文本的容器:

.text {
  width: auto;
  height: auto;
  max-width: 350px;
  word-break: break-word;
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 5px;
}

<div class="text">
  Some text!
</div>

<div class="text">
  Some longer text!
</div>

<div class="text">
  Some longer long loooonger text!
</div>

<div class="text">
  Some longer longer very longer very very veeeery looonger text!
</div>

我的想法是，让文本 float 直到达到我的max-width: 350px。到时应断言。我想，我的第一个文本，只包含两个单词会更短，因为它直到 350px 才 float 并且不需要打断单词，而我的最后一个容器应该达到它的文本长度最大宽度350px 然后打断字。我遇到的问题是，现在每个容器都具有相同的宽度。怎么了？我也尝试使用 min-width: 100px; 但它没有帮助。有什么想法吗？

Answer 1

您需要使用inline-block 或inline-flex，

此外，word-break: break-word 是 deprecated , 所以使用 word-break:break-all 或 word-wrap: break-word

.text {
  width: auto;
  height: auto;
  max-width: 350px;
  word-break: break-all;
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 5px;
  display: inline-flex
}

<div class="text">
  Some text!
</div>

<div class="text">
  Some longer text!
</div>

<div class="text">
  Some longer long loooonger text!
</div>

<div class="text">
  Some longer longer very longer very very veeeery looonger text!
</div>