仅使用css在图像下自动调整文本

Question

我试图在图像下面布置一些文字，使图像确定容器的宽度，文本包裹成几行以适应宽度。

我目前的代码如下：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但正如您所看到的，由于文本是以绝对方式定位的，因此它不是容器高度的一部分，因此无法在页面的其余部分正确布局。

如何正确解决此问题？我宁愿失去一些浏览器兼容性而不是使用js btw。

Answer 1

试试这个

.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>

这是您可以尝试的另一种解决方案

.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>