在容器父级处包装断词，但在容器边缘正常

Question

说我有一个外部div和一个内部有文本的div。内部div的固定宽度比外部div窄。 我希望文本根据内部div边缘的空格进行换行，但允许长单词溢出，但像overflow-wrap: break-word;那样在外部div的边缘进行换行。

我该怎么做？

div {
  border: 1px solid #888;
}

.outer {
  width: 200px;
  font-size: 22px;
  display: inline-block;
  margin-right: 1em;
}

.first {
  overflow-wrap: break-word;
}

.inner {
  width: 120px;
}

<div class="outer first">
  <h2>What I get</h2>
    <div class="inner">
        Some text with a long word, Supercalifragilisticexpialidocious, and some short words.
    </div>
</div>

<div class="outer">
  <h2>What I want</h2>
    <div class="inner">
        Some text with a long word, Supercalifragilisticex<br>pialidocious, and some short words.
    </div>
</div>

（而且，当然不能使用<br>标签。外部div的宽度将改变。）

编辑：建议我添加一张图片。

我们有一个标头，该标头应该以500px的宽度环绕在max-width: 1200px;的div中。我希望不要将“简介”一词换行，除非在足够小的屏幕上使其到达外部div的边缘。

我们有一堆将要使用这种格式的项目，并且我们看到了一些较长的单词会像这样破裂。