css - 在容器父级处换行，但在容器边缘处正常

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 的边缘。

我们有一堆将使用这种格式的项目，我们已经看到一些较长的单词像这样中断。

标签： css