你可以使用display: inline-block，但是这会把背景颜色变成一个难看的框，看起来不如每行有一个精确宽度的背景。不幸的是，CSS不允许我们针对单独的行，除了第一行。
如果你不介意有点“创意”（或hacky），你可以在后台将每个单词 Package 在它自己的元素中，或者使用JavaScript，并将背景颜色应用到这些元素中。

.main {
  font-family: sans-serif;
  font-weight: bold;
  background-color: #99c;
  display: flex;
  height: 400px;
  flex-direction: row;
  align-items: center;
}

.text-container {
  max-width: 500px;
  display: inline-block;
  word-spacing: -15px;
  position: relative;
  padding-left: 20px;
  overflow: hidden;
}

.text-container::before {
  content: '';
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 100%;
  z-index: 1;
}

span {
  font-size: 36px;
  line-height: 1.5em;
  color: white;
  background-color: black;
  padding: 0.25em 0.5em 0.25em 0;
  max-width: 360px;
}

<div class="main">
  <div class="text-container">
    <span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>
  </div>
</div>

您可以使用box-shadow解决此问题并内联显示：

<div class="text">
    <span class="text-container">A Movie in the park: Kung Fu Panda</span>
</div>

和css：

.text > span {
    display: inline;
    box-shadow: 25px 0 0 black, -10px 0 0 black;
    background-color: black;
    color: white;            
}

尝试在“Park：“之后和“Kung”之前添加 

padding worked！！！通过控制台浏览器更改宽度并查看结果：

h1{
    background-color: #ff6a6a;
    padding: 33px;
    display: inline-block;
    word-wrap: break-word;
    width:300px
}

<h1>rert ert erttttttttttttttt 00000000000000000000 dfgdfgd dfgdfgdft ertert  </h1>

使用<p>标签来 Package 文本，它显然可以工作在demo

<div class="main">
  <div class="text-container">
    <p id="test">A Movie in the park: Kung Fu Panda</p>
  </div>
</div>

CSS

.main {
  font-family: sans-serif;
  font-weight: bold;
  background-color: #99c;
  display: flex;
  height: 400px;
  flex-direction: row;
  align-items: center;
}

.text-container {
  max-width: 400px;
}

p {
  font-size: 36px;
  line-height: 2em;
  color: white;
  background-color: black;
  padding: 0.5em;
  max-width: 360px;
}