title: flexibly ellipsized two spaces in one area according to the text length
body: <p>I want to flexibly ellipsized two spaces in one area according to the text length  on my website. In the case of a code pen page(<a href="https://codepen.io/jiniC/pen/QWpzOeo" rel="nofollow noreferrer">https://codepen.io/jiniC/pen/QWpzOeo</a>), I want to abbreviate only the text1 text while all the text in the text2 area is exposed.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;box&quot;&gt;
    &lt;span class=&quot;item text1&quot;&gt;ellipsis test ellipsis test ellipsis test ellipsis test&lt;/span&gt;
    &lt;span class=&quot;ico&quot;&gt;&amp;nbsp|&amp;nbsp&lt;/span&gt;
    &lt;span class=&quot;item text2&quot;&gt;full text&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.box {
    width: 300px;
    background-color: green;
    display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
  }
  .item {
    flex: 0 1 auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: white;
  }
  </code></pre>
  <p>I know that it is possible to some extent by giving the min-width value to the item area. However, if min-width is given, blank space is left when the text is less than the min-width value. I want the text to be fully exposed up to a certain length, even though there is no margin when the length is short.</p>
  <p>That is, I do not want the following situation:
  <a href="https://i.stack.imgur.com/O9itK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O9itK.png" alt="enter image description here" /></a></p>
  <p>Is this possible only with styling?</p>
  <p>Here are some examples of different exposures depending on the text length I want.<br>
  [text1]|[text2]<br>
  [Short Short text1]|[text2]<br>
  [Very long text1 that has to be elli...]|[Short text2]<br>
  [text1]|[Very long text2 that has to be ellipsized...]<br>
  [Very long text1 that h...][Very long text2 that h...]</p>