Truncate text with css

Question

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 -

I have something like this in html layout:

In all other

.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;
}

<div class="input-group">
    <input type="hidden" id="field_19" value="123">
    <input type="hidden" id="field_18" value="456">
    <span class="Label" title="Some Text">SOME LONG LONG LONG LONG TEXT</span>
    <span class="input-group-btn ev-input-group input-group">
        <button type="button" class="edit_button" data-reditcontroller="some url">btn
            <i class="f-edit"></i>
        </button>
    </span>
</div>

    

Answer 1

The reason for the strange behavior is that you have not defined the WIDTH at which the ... should start. And make sure it is display:inline-block so as to make sure the width is definable.

CSS

  .Label:not(textarea){
      overflow:hidden;
      width: 90%; //can also use calc function as per Yudi's answer
      display: inline-block;
      text-overflow:ellipsis;
      white-space:nowrap;
    }