Ширина блока после переноса слов

Question

.parent {
  border: 1px solid red;
  display: flex;
  max-width: 200px align-items:center;
}

.content {
  border: 1px solid orange;
}

<div class="parent">
  <span class="content">
    Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!!
  </span>
  <div>
    @@@
  </div>
</div>

как сделать так чтоб после текста небыло етих промежутков между бордером (контент может быть динамический)

Answer 1

ну можно использовать text-align: justify к примеру

.parent {
    border: 1px solid red;
    display: flex;
    max-width:200px
}

.content {
  border: 1px solid orange;
  text-align: justify;
}

<div class="parent">
  
      <span class="content">
    Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!!
    </span>

  <div>
    @@@
  </div>
</div>

Answer 2

Если нужно, чтобы браузер сам переносил текст, но при этом ширина блока получилась по реальному контенту, то без скриптов этого сделать не получится.

Впрочем, есть несколько частных случаев.

Если переводы строк задать явно, и воспользоваться white-space: pre-line; (или любым другим подходящим), то ширина блока автоматически уменьшится.

Если в каждой строке должно быть по одному слову, то можно попробовать width: min-content, которое (при запрете разрыва слов) сожмёт блок под ширину самого длинного слова.

Для чего-то другого способов не знаю.

БЛОГ НА HUSL

Ширина блока после переноса слов

Ответы (2 шт):