Как можно сделать так, чтобы при увеличинии текста блок увеличивался в ширину?

Рейтинг: 0Ответов: 2Опубликовано: 13.03.2023

Как можно сделать так, чтобы при увеличении текста блок увеличивался в ширину, и если места не хватает, то он смещается вниз?

Как можно это сделать при помощи grid? сетка 3/3 может быть 8 или 9 элементов.

Пример изображения:

Пример изображения

введите сюда описание изображения

css html
Источник: Stack Overflow на русском

Ответы

▲ 0

Вроде то что вы хотели?
"min-width: calc(33% - 18px);" - это дефолтная ширина на три блока в ряду
А "width: max-content;" - отвечает за ширину текстов длиннее "min-width" которые.

.list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0;
  padding: 0;
}
li {
  font-size: 18px;
  list-style: none;
  width: max-content;
  min-width: calc(33% - 18px);
  display: block;
  background: yellow;
}
<ul class="list">
  <li>Длинный Длинный Длинный текст 1</li>
  <li>Длинный текст 2</li>
  <li>Длинный текст 3</li>
  <li>Длинный текст 4</li>
  <li>Длинный текст 5</li>
  <li>Длинный текст 6</li>
  <li>Длинный Длинный Длинный Длинный Длинный текст 7</li>
  <li>Длинный текст 8</li>
  <li>Длинный текст 9</li>
</ul>

▲ 0

Инлайн-блок:

span {
  font-size: 18px;
  display: inline-block;
  background-color: wheat;
  border-radius: 4px;
  margin-right: 1em;
  margin-bottom: 0.5em;
  padding: 0.25em 0.5em;
}

div {
  text-align: justify;
}
<div>
  <span>Длинный Длинный Длинный текст 1</span>
  <span>текст 2</span>
  <span>Длинный текст 3</span>
  <span>Длинный теееееекст 4</span>
  <span>Длинный текккст 5</span>
  <span>Длинный текст 6</span>
  <span>Длинный тееееееееееееееееееееееееееееееееекст 7</span>
  <span>Длинный теккккст 8</span>
  <span>текст 9</span>
</div>