使文本在自动宽度 div 内换行

Question

我在垂直列表上有一堆响应式 img 元素（它们根据图像和视口大小调整大小）。

每个图像都需要在底部进行描述，但不应水平扩展容器。（我目前无法将文本换行到新行）

在第一个示例中，文本扩展了容器的宽度。对于第二个示例，我必须添加<br>标签来模拟我想要的。

有没有办法控制文本元素的换行（通过使用 CSS）？

顺便说一句，这是本示例的 JSFiddle。

Answer 1

您可以使用width: min-contentto 来.box实现这一点，例如：

.box {
  width: min-content;
}

看看下面的片段或更新的小提琴：

.box {
  width: min-content;
}

.box {
  width: min-content;
  display: table;
  position: relative;
  background: #334b64;
  margin: 0px auto 20px auto;
  box-shadow: 0px 0px 50px rgba(29, 80, 123, 0.3);
}

.text {
  color: white;
  font-size: 14;
  text-align: center;
  position: relative;
  width: 100%;
  height: auto;
  word-wrap: break-word;
  white-space: pre-wrap
}

希望这可以帮助！