title: How to stop an overflowing span from clipping off another span
body: <p>So I have 2 words in spans within a fixed width div. Currently, I'm using text-overflow: ellipsis to clip them.  But if the first word is really long, it pushes and clips the second word.</p>
  
  <p>So it looks like this:</p>
  
  <p>|Word 1 Word 2 |</p>
  
  <p>and when I have a long first word it cuts off word 2 like this:</p>
  
  <p>| ReallyLongW...|</p>
  
  <p>How can I get it so Word 2 doesn't get cut off, and instead Word 1 does like this:</p>
  
  <p>| Reall... Word 2|</p>
  
  <p>I feel like there's definitely some combination of css and containers to get this done, but I haven't found it yet. Note that I still want Word 2 left aligned and appended to the end of Word 1 like before, just the overflow behavior should change.</p>
  
  <p>Edit: This is the closest I've gotten</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mydiv {
      max-width: 150px;
  }
  
  .myspan {
      float: left;
      max-width: 50%;
      color: #f00;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
  }
  
  .myotherspan { 
      float: left;
      color: #00f;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mydiv"&gt;
     &lt;span class="myspan"&gt;Wordaksjdkajsdasfasdfds&lt;/span&gt;
     &lt;span class="myotherspan"&gt;Word 2&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="mydiv"&gt;
     &lt;span class="myspan"&gt;Word 1&lt;/span&gt;
     &lt;span class="myotherspan"&gt;Word 2&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This will work well enough for me because in my case, I know Word 2 will always be small and around the same size (4-7ish characters).  But ideally I don't want to hardcode the the max width because I don't want to hardcode it to the worst case 7 characters, then waste whitespace when it turns out to only be 4 characters. I'd rather it dynamically size Word 1 to fit what ever is there after Word 2 fits in.  </p>