如何让文本自动换行以匹配图片宽度？

不需要JavaScript，仅通过调整CSS即可实现需求，具体修改如下：

修改后的完整代码 #

CSS #

.parent {
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: fit-content;
  padding: 0 10px;
}

.image {
  display: block;
  max-width: 100%;
  max-height: 90%;
}

.text {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #f8e8ee;
  text-align: center;
  width: 100%;
}

HTML #

<div class="parent">
  <div class="container">
    <img src="https://i.sstatic.net/tsiOZ.jpg" class="image" />
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus porta augue at porta. Sed convallis dictum dolor, non iaculis urna dapibus sit amet. Donec ipsum nunc, dictum sed est ac, feugiat lobortis diam. Nulla id sapien dictum enim tempus
      tincidunt. Integer iaculis, ex a luctus auctor, ligula quam aliquet ex, eu luctus velit ipsum nec nunc. Donec sed nisi a velit rutrum euismod. Nullam eu orci vel ligula maximus aliquam ut eu tortor. Donec aliquet, enim quis ornare tincidunt, massa
      ipsum tincidunt tortor, quis maximus lacus ipsum ut lacus. Sed sollicitudin diam quis finibus faucibus. Morbi id egestas risus, eget ultricies ipsum. Pellentesque posuere accumsan purus, in semper ligula mattis ac. Sed finibus interdum nulla, vitae
      vulputate mauris finibus et. Nunc porttitor viverra dui, vel tempus tellus tempor at. Praesent sit amet rutrum nisi, in consequat enim. Maecenas nec nisl at nulla feugiat placerat eget non tellus.
    </div>
  </div>
</div>

核心修改点及原理 #

• 移除.container的width:100%：避免容器强制占满父级宽度，让其宽度由内部元素决定。
• 给.container添加max-width: fit-content：限制容器宽度为内部最宽元素（即图片）的宽度，防止文本撑开容器。
• 给.text添加width:100%：让文本块占满容器宽度，从而自动根据图片宽度换行。

替代方案（Grid布局） #

如果更倾向于Grid布局，可将.container和.text的CSS修改为：

.container {
  display: grid;
  justify-items: center;
  max-width: fit-content;
  padding: 0 10px;
}

.text {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #f8e8ee;
  text-align: center;
  width: 100%;
}

Grid布局下子元素默认共享列宽，图片宽度会直接决定列宽，文本块设置width:100%后自动匹配图片宽度。

内容的提问来源于stack exchange，提问作者duruburak