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

Question

[Dan Ryehood]

Задача, казалось бы, тривиальная.

Вот есть код:

<div class="parent">
    <div class="image">
        <img src="1.jpg">
    </div>
    <div class="caption">
        Это пояснение к картинке, может быть любой длиной.
    </div>
</div>

Картинка может быть любой шириной. Но текст-пояснение, расположенный ниже, должен не выходить за рамки картинки, а переноситься! Как это сделать?

Структуру тегов можно менять как угодно. Главное, реализовать описанный выше принцип: подпись к картинке с ограниченной максимальной шириной по ширине картинки. Без JS, естессно.

С ума сошел уже придумывать решение.

Answer 1

[Юрий Лобанов]

codepen.io/iiil/pen/jcvri

Проблема только если будете переносить эти блоки собираетесь ) Можно margin сделать, но его величину не определить без js.

Comments

[Dan Ryehood]

Такое решение я тоже пробовал, но за счет того, что блок позиционируется абсолютно, родительский блок теряет высоту текста. Когда картинок много и они переходял на след. строку, высота блока caption не учитывается... Как быть?

[Dan Ryehood]

Вот-вот. И я про то же... Может есть какие-нибудь ну-совсем-другие пути решения? Типа флекс-боксами там.

[Юрий Лобанов]

@wbird таблицами или display table.

[Dan Ryehood]

@iiil Пробовал сделать таблицой. Текст все равно растягивает колонку.

[Юрий Лобанов]

@wbird посмотрите еще раз по ссылке

[Евгений Петров]

@iiil поставь ненулевую ширину — webkit игнорирует 0. Примерно так:

.cont{
	display:table;
	width:1px;
	text-align:justify;
}
.capt{
	display:table-row;
}

[Юрий Лобанов]

@Petroveg ага, спасибо.

[Dan Ryehood]

@Petroveg @iiil Хороший вариант! Пожалуй, отмечу как решение!

Answer 2

[Alexey1975]

Даже не знаю где вы здесь умудрились "...с ума сойти уже придумывать"

<div class="parent">
    <div class="image">
        <img src="1.jpg">
    </div>
    <div class="caption">Это пояснение к картинке, может быть любой длиной.
    </div>
</div>

<style type="text/css">
.caption {
	width: 100%;
	background-color: #BAE6FF;
}
.image img  {
	width: 100%;
}
</style>

Comments

[Dan Ryehood]

Это не работает. Картинка может быть любой ширины, и она сама должна задавать ширину для текстового блока. А у вас тут:

.image img {
width: 100%;
}

Я думал, я понятно описал проблему.

Answer 3

[koller18]

.родитель {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.вляющий_на_ширину_блок {
    display: flex;
    align-items: center;
    width: fit-content;
}

.не_влияющий_на ширину_блок_с_текстом {
    text-wrap: balance;
    width: min-content;
    min-width: fit-content;
}