Как ограничить ширину контейнера для текста в flex блоке?

Question

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

Answer 1

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

Вот. Текст переносится... section не растягивается...

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

Если использовать таблицу - можно получить следующий "эффект":

Картинка будет ее растягивать.
Текст будет использовать доступную ширину.

Третьим вариантом добавил возможность использования "теневого дерева". Это уменьшит размер создаваемого html-контента... Добавит "читабельности". Но, также, добавит использование JS скрипта.

document.querySelectorAll('.test').forEach(o => {
  o.attachShadow({mode: 'open'});
  o.shadowRoot.append(tmpl.content.cloneNode(true));
})

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid;
}
.img {
  width: 300px;
  height: 300px;
  background-color: red;
}
p {
  text-align: center;
}
table {
  width: 1px;
}

<!-- Есть флекс контейнер -->
<section>
  <!-- В нем изображение шириной 300px -->
    <div class='img'></div>
  <!-- под ней подпись -->
  <p>
    Если текст длинный, то блок растягивается, можно ли сделать ограничение, чтобы текст перепрыгивал на новую строчку когда достигнет начальной ширины блока, а не растянет его? Если есть ссылка где об этом расписано скиньте пожалуйста, сам не смог найти инфу.
  </p>
</section>
<section>
  <table border='1'>
    <tr>
      <!-- В нем изображение шириной 300px -->
      <td><div class='img'></div></td>
    </tr>
    <tr>
      <td>
        <!-- под ней подпись -->
        <p>
          Если текст длинный, то блок растягивается, можно ли сделать ограничение, чтобы текст перепрыгивал на новую строчку когда достигнет начальной ширины блока, а не растянет его? Если есть ссылка где об этом расписано скиньте пожалуйста, сам не смог найти инфу.
        </p>
      </td>
    </tr>
  </table>
</section>
<section class='test'>
  <div slot='img' class='img'></div>
  <p slot='text'>
    Если текст длинный, то блок растягивается, можно ли сделать ограничение, чтобы текст перепрыгивал на новую строчку когда достигнет начальной ширины блока, а не растянет его? Если есть ссылка где об этом расписано скиньте пожалуйста, сам не смог найти инфу.
  </p>
</section>
<section class='test'>
  <div slot='img' class='img'></div>
  <p slot='text'>
    Если текст длинный, то блок растягивается, можно ли сделать ограничение, чтобы текст перепрыгивал на новую строчку когда достигнет начальной ширины блока, а не растянет его? Если есть ссылка где об этом расписано скиньте пожалуйста, сам не смог найти инфу.
  </p>
</section>
<section class='test'>
  <div slot='img' class='img'></div>
  <p slot='text'>
    Если текст длинный, то блок растягивается, можно ли сделать ограничение, чтобы текст перепрыгивал на новую строчку когда достигнет начальной ширины блока, а не растянет его? Если есть ссылка где об этом расписано скиньте пожалуйста, сам не смог найти инфу.
  </p>
</section>
<template id='tmpl'>
  <style>
    table {
      width: 1px;
    }
  </style>
  <table border='1'>
    <tr>
      <!-- В нем изображение шириной 300px -->
      <td>
        <slot name='img'></slot>
      </td>
    </tr>
    <tr>
      <td>
        <!-- под ней подпись -->
        <slot name='text'></slot>
      </td>
    </tr>
  </table>
</template>

Answer 2

Используй width: min-content; на флекс-контейнере, внутри которого изображение и текст. А уже его вставляй куда тебе нужно.

function resize(){
    let image = document.querySelector(".image");
    image.style.width = "200px";
    image.style.height = "200px";
}

.wrapper{
    display: flex;
    flex-direction: column;
    border: 1px solid black;
    width: min-content;
}

.image{
    background-color: lightgray;
    width: 300px;
    height: 300px;
}

.description{
    padding: 10px;
}

<div class="wrapper">
    <div class="image" onclick="resize()">КЛИКНИ НА МЕНЯ</div>
    <span class="description">
     Если текст длинный, то блок растягивается,
     можно ли сделать ограничение, чтобы текст перепрыгивал на новую
     строчку когда достигнет начальной ширины блока, а не растянет его?
     Если есть ссылка где об этом расписано скиньте пожалуйста,
     сам не смог найти инфу.</span>
</div>

БЛОГ НА HUSL

Как ограничить ширину контейнера для текста в flex блоке?

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