Autofit text under the image only css

Question

I'm trying to lay out the text under the image so that the image determines the width of the container, and the text is wrapped in several lines to fit the width.

My current code is as follows:

.image-container {
	display: inline-block;
	text-align: center;
    padding: 6px;
	background-color: red; /* To highlight container size */
}

.image {
	height: 120px;
}

.text-wrapper {
	position:relative;
	width: 100%;
}

.text {
	position:absolute;
	left:0px;
	top:100%;
	right:0px;
}

<div class='image-container'>
	<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
	<div class='text-wrapper'>
		<p class='text'>Some text that may need to wrap into multiple lines</p>
	</div>
</div>

Run codeHide result

But, as you can see, since the text is positioned with an absolute value, it is not part of the height of the container, which makes it impossible to correctly fit the rest of my page.

How can I solve this problem correctly? I'd rather lose browser compatibility than using js btw.

Answer 1

try it

.image-container {
  display: table;
  width: 1%;
}

img {
  height: 120px;
}

.text {
  overflow: hidden;
}

<div class='image-container'>
	<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
	<div class='text-wrapper'>
		<p class='text'>Some text that may need to wrap into multiple lines</p>
	</div>
</div>

Run codeHide result

Here is another solution you could try

.image-container {
  display: table;
}

img {
  height: 120px;
}

.text-wrapper {
  display: table-caption;
  caption-side: bottom;
}

<div class='image-container'>
	<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
	<div class='text-wrapper'>
		<p class='text'>Some text that may need to wrap into multiple lines</p>
	</div>
</div>

Run codeHide result