html - 设置 min-width float 直到 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>

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

Answer 1

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

此外，word-break: break-word不推荐使用，所以使用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>

Answer 2

请试试

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