Autofit Text Under Image With Only Css

I'm trying to lay out some text under an image in such a way that the image determines the width of the container and the text wraps into several lines to fit the width. My current

Solution 1:

Try this

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

img {
  height: 120px;
}

.text {
  overflow: hidden;
}

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

Here is another solution you could try

.image-container {
  display: table;
}

img {
  height: 120px;
}

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

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