用css截断文本

Question

我在文本截断方面遇到了这个问题。当我尝试缩小窗口的大小时，它不会截断。带有 LONG TEXT 的字段会缩小，直到按钮遇到其中的最后一个字母，并且不会进一步截断。没有三点的东西只是停在字段内的最后一个字母上。有点像这样——

我在 html 布局中有这样的东西：

在所有其他

.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

奇怪行为的原因是您没有定义...应该开始的 WIDTH 。并确保它display:inline-block确保宽度是可定义的。

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