Установите минимальную ширину с плавающей точкой до максимальной ширины и текста на разрыв слова

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 и не должен разбивать слова, в то время как мой последний контейнер должен достигать с длиной текста max-width 350px, а затем разбить слова. У меня проблема в том, что теперь каждый контейнер имеет одинаковую ширину. В чем дело? Я пытался также использовать min-width: 100px; но это не помогло Есть идеи?

Answer 1

Вам нужно использовать либо inline-block или же inline-flex,

также word-break:break-word не существует, поэтому используйте word-break:break-all или же word-wrap: break-bord

.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;
}