title: How to truncate long text with ellipsis but always show icon after ellipsis
body: <p>What I'm trying to accomplish is a title which fills its available parent div width, but if its copy doesn't fit in the div it should truncate with ellipsis. Additionally it should also have an icon after it, which shouldn't disappear on truncation, but always show after the ellipsis.</p>
  
  <p>Another requirement is that the parent div should have one or more buttons, of not-specific width, that stay on the far right, but if the div is resized it should truncate the long title, allowing the icon to show next to the ellipsis as I described before.</p>
  
  <p>Visually, my desired result looks like this:
  <img src="https://i.imgur.com/P9AELaP.png" alt="truncation problem"></p>
  
  <p>Up until now I've achieved the following: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Helper styles not relevant to the example */
  
  /* Simple flag object from @csswizardry */
  
  .flag {
    display: table;
    width: 100%;
  }
  .flag .flag__section {
    display: table-cell;
    vertical-align: middle;
  }
  
  /* Right float text from bootstrap */
  
  .text-right {
    text-align: right !important;
  }
  
  
  /* Colors for better visibility */
  
  .container {
    background-color: #55606d;
    color: #333;
    padding: 20px;
  }
  .flag__section--a {
    background-color: #22d398;
  }
  .flag__section--b {
    background-color: #91c1f8;
  }
  .fluid-text__icon {
    background-color: #fecb52;
  }
  
  
  
  /* Styles relevant to the example */
  
  .container {
    max-width: 700px;
  }
  .fluid-text {
    text-align: left;
  }
  .fluid-text__inner {
    max-width: 100%;
  }
  .fluid-text__inner,
  .fluid-text__copy {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fluid-text__copy,
  .fluid-text__icon {
    float: left;
  }
  .fluid-text__copy {
    padding-right: 5px;
  }
  .fluid-text__icon {
    margin-top: 30px;
  }
  
  /* I'd like to not set explicit max width here */
  .title {
    max-width: 600px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='container'&gt;
    &lt;div class='flag'&gt;
      &lt;div class='flag__section flag__section--a fluid-text'&gt;
        &lt;div class='fluid-text__inner'&gt;
          &lt;h1 class='fluid-text__copy title'&gt;
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum in, voluptas dolorum sit ab modi facere tempora est, sequi molestiae! Commodi vitae sapiente ipsum, nisi facilis impedit aut? Repellendus!
          &lt;/h1&gt;
          &lt;span class='fluid-text__icon'&gt;icon&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='flag__section flag__section--b text-right'&gt;
        &lt;button&gt;ACTION&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, my only concern is that I have to explicitly set <code>.title</code> <code>max-width</code> which is not scalable and I would like to avoid it.</p>
  
  <p>Is there any way to do it without js?</p>