用css截断文本

Question

我在文本截断方面遇到了这个问题。当我试图缩小尺寸时，它并没有被截断。带有LONG TEXT的字段缩小，直到按钮符合其中的最后一个字母，并且不会进一步截断。在场内的最后一个字母上没有三点点的东西停止。有点像这样 -

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

在所有其他

中

＆＃13;

＆＃13;

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

＆＃13;

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

    

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

1. 限制.Label的宽度，使其适合max-width: 100%内的窗口。
2. 为了使上述功能正常运行，您需要将display上的.Label设置为block或inline-block。与您已有的最接近的是inline-block。
3. 从display: table移除.input-group。我认为这不是必需的，因为您使用的是div而不是table。
＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;