根据这个-Post
您可以使用此代码使文本强制为图像的宽度。

.parent {
  background: pink;
  display:inline-block;
}

.description {
  width:0;
  min-width:100%;
}

img {
  width: 200px /*adjust as needed*/
}

<div class="parent">
   <img src="https://scied.ucar.edu/sites/default/files/styles/half_width/public/2021-10/cumulus-clouds.jpg.webp?itok=HkQfuWxM">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

这就是你如何使用JavaScript实现的：

window.addEventListener('load', function() {
    document.querySelector(".text").style.width =  document.querySelector('.image').offsetWidth + "px";
});

.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;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

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

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

<div class="parent">
  <div class="container">
    <img src="https://i.stack.imgur.com/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>

您可以尝试应用仅限CSS的规则，可能是受到Set div to have its siblings width的启发，但考虑到图像的宽度未知并且可以更改，我不确定它是否会产生您期望的结果。

window.addEventListener('load', function() {
  const container = document.querySelector('.container');
  const text = document.querySelector('.text');
  const image = document.querySelector('.image');
  
  function adjustTextWidth() {
    const imageWidth = image.offsetWidth;
    text.style.maxWidth = imageWidth + 'px';
  }
  
  adjustTextWidth();
  
  window.addEventListener('resize', adjustTextWidth);
});

.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;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

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

.text {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #f8e8ee;
  text-align: center;
  max-width: 100%; /* Add this */
  overflow-wrap: break-word; /* Add this */
}

<div class="parent">
  <div class="container">
    <img src="https://i.stack.imgur.com/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>

你可以试试这个在你的小提琴中，它看起来一致文本在. text元素中的换行，并使其宽度与. image相等。
如果你能同时使用CSS和JavaScript，那就很容易了。（我已经试过你的小提琴似乎很好用）
这里的简单代码实际上侦听加载事件，然后计算***". image"的宽度，最终为". text"*设置相同的宽度
请记住，这里我使用了"maxWidth"**属性[您可能不喜欢]。
不知道你是如何和在哪里尝试使用它。但这似乎会帮助你在任何环境。快乐编码