设置最小宽度浮动直到最大宽度和分词文本

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

Answer 2

请尝试

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

设置最小宽度浮动直到最大宽度和分词文本

Set min-width float until max-width and word-break text

html

css

word-break