title: Truncate text with css
body: <p>I've got this problem with text truncating. It doesn't truncate when I'm trying to size down the winow. The filed with the LONG TEXT shrinks until the button meets the last letter in it and doesn't go further to truncate. No three-dot thing just stops at the last letter inside the field. Somewhat like this - <a href="https://i.stack.imgur.com/EJf0O.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EJf0O.gif" alt="enter image description here"></a></p>
  
  <p>I have something like this in html layout:</p>
  
  <p>In all other</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>.Label:not(textarea){
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  
  .input-group {
      position: relative;
      display: table;
      border-collapse: separate;
  }
  
  .input-group-btn {
      position: relative;
      font-size: 0;
      white-space: nowrap;
      display: table-cell;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="input-group"&gt;
      &lt;input type="hidden" id="field_19" value="123"&gt;
      &lt;input type="hidden" id="field_18" value="456"&gt;
      &lt;span class="Label" title="Some Text"&gt;SOME LONG LONG LONG LONG TEXT&lt;/span&gt;
      &lt;span class="input-group-btn ev-input-group input-group"&gt;
          &lt;button type="button" class="edit_button" data-reditcontroller="some url"&gt;btn
              &lt;i class="f-edit"&gt;&lt;/i&gt;
          &lt;/button&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  
      </code></pre>
  </div>
  </div>
  </p>