title: CSS wrapping break points where I want between multiple text elements
body: <p>Okay, I've got 3 variables, StringA, StringB, StringC. StringA and StringB combine to link to an external page.</p>
  <p>By default, all 3 elements are on the same line:</p>
  <pre><code>StringA StringB StringC
  </code></pre>
  <p>When one of them is too long for the space, they need to wrap in a way that leaves StringA on the first line:</p>
  <pre><code>StringA
  StringB StringC
  </code></pre>
  <p>When more wrapping is needed, then:</p>
  <pre><code>StringA
  StringB
  StringC
  </code></pre>
  <p>My current code looks something like this (with flex happening at a higher level):</p>
  <pre><code>&lt;span class=&quot;container&quot;&gt;
      &lt;a class=&quot;link&quot;&gt;
          &lt;span class=&quot;string-a&quot;&gt;{{stringA}} &lt;/span&gt;
          &lt;span class=&quot;string-b&quot;&gt;{{stringB}}&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;span class=&quot;string-c&quot;&gt;{{stringC}}&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  <p>And the CSS:</p>
  <pre><code>.container {
      .string-b {
          white-space: nowrap;
      }
  
      .string-c {
          white-space: nowrap;
      }
  }
  </code></pre>
  <p>This gets me most of the way there, but it makes a &quot;smart&quot; choice on whether to wrap between A and B or between B and C, and I need it to always wrap between A and B as the first choice and only wrap between B and C if A and B are already wrapped.</p>
  <p>Presumably, there's a way to use flexbox to solve this, but I've tried a whole bunch of things and keep failing. Having to restore to JS to do it would be pretty ugly.</p>