只需修改（'. textbox'）类的width属性。这将导致文本区域占用图像上更多的空间，并且不会很快换行。如果你尝试在fiddle中测试它，只需确保在修改后点击左上角的'run'命令即可。

.textbox {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
      width: 80%;
    }

将width: 80%添加到文本框css

.container {
  position: relative;
  width: 500px;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.textbox {
  width: 80%;
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .textbox {
  opacity: 1;
}

.text {
  background-color: #04AA5D;
  color: white;
  font-size: 15px;
  padding: 10px 10px;
}

<h3>Hover over the image to see the effect.</h3>

<div class="container">
  <img src="https://walter.trakt.tv/images/movies/000/472/401/fanarts/thumb/ae10b31b1f.jpg.webp" alt="Avatar" class="image" style="width:100%">
  <div class="textbox">
    <div class="text">Each Christmas Eve, the Ghost of Christmas Present selects one dark soul to be reformed by a visit from three spirits. But this season, he picked the wrong Scrooge. Clint Briggs turns the tables on his ghostly host until Present finds himself reexamining his own past, present and future.</div>
  </div>
</div>