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

Answer 2

.Label:not(textarea){
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 45px);
    display: block;
}

.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 3

.Label:not(textarea){
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:inline-block;
  width:150px;
}

.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 4

1. 限制.Label 的宽度，使其适合max-width: 100% 的窗口。
2. 为了使上述操作生效，您需要将.Label 上的display 设置为block 或inline-block。与您已有的最接近的是inline-block。
3. 从.input-group 中删除display: table。我认为这里没有必要，因为您使用 div 而不是 table。

.Label:not(textarea) {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input-group {
  position: relative;
  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 LONG LONG LONG LONG LONG LONG LONG LONG LONG 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>