Is it possible to have multiple containers have different effects on word wrapping?

I have a container that holds a container that holds text such as

<div id="outer">
  <div id="inner">
    <p>Text</p>
  </div>
</div>

and the inner container is centered in the outer one and is smaller than it

#inner {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

Is it possible to implement a word wrap rule like this?

• If possible without breaking apart a word, break line inside the inner container
• If not possible, let the word reach beyond bound of inner container
• If the word reaches the outer container's bounds, break it apart regardless of spaces

Illustration:

┌───────────────────────────┐
│        ┌─────────┐        │
│        │A sentence        │
│        │that goes│        │
│        │over the bounds   │
│        │of the inner      │
│        │container│        │
│        │But if we│        │
│        │have a word       │
│        │that's far        │
│        │too long,│        │
│        │such as  │        │
│        │Antidisestablishme│
│        │ntarianism,       │
│        │it's broken       │
│        │apart.   │        │
│        └─────────┘        │
└───────────────────────────┘

I've tried doing it like this:

#outer {
  overflow-wrap: break-word;
}

#inner {
  overflow-wrap: normal;
}

but it doesn't work.