Force word wrap if elements after content needs to be wrapped

I've found a couple questions that sort of address this issue, but not really what I need. I have some text,

once-weekly dosing regimen for instance. On this element, there's an after css rule, as such:

font-family: FontAwesome;
content: " \f105";
color: #00467f;

I have these elements in a typical grid, and when you resize window smaller, eventually the :after content (the arrow) will go to next line, which is fine. However, I'm trying to make it so the last word will also wrap with the after content. I've tried a couple answers I found to similar questions with no prevail, which include: setting display: inline-block to both elements, I messed with the white-space and word-wrap properties with no luck and I've tried setting a width to the :after rule as well with no prevail. What I did find to sort of work is setting the white-space: nowrap rule on the element itself, which stops the :after content from wrapping, however isn't exactly what I want.

Any suggestions?

Solution

You'd have to wrap that last word in a separate element (probably with the pseudo-element on that). You can't force a break in raw text on overflow.

Something like:

span {
  white-space: nowrap;
}

span::after {
  font-family: FontAwesome;
  content: " \f105";
  color: #00467f;
  vertical-align: middle;
}

div {
  padding: .25rem;
  font-size: 2rem;
  width: 50%;
  margin: 2em auto;
  border: 1px solid grey;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  once-weekly dosing <span>regimen</span>
</div>