Question

.wrapper {
  background: tomato;
  width: 100px;
  display: flex;
}

.left {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.right {

}

<div class=wrapper>
  <div class="left">
    title title title title
  </div>
  <div class="right">
    123
  </div>
</div>

我有一个DIV（wrapper），里面有2个DIV：left和right。

wrapper的宽度已知。我想在left DIV中截断文本，如果它不合适的话。 right中的文字应始终可见。我在这里尝试了几种技术，但唯一的工作是基于弹性盒。不幸的是它不适用于IE10。我使用了-ms-前缀，没有成功。

有没有办法让它在IE10上运行？

Answer 1

我无法在IE10上自行测试，但由于其-ms-flex默认为0 0 auto，因此您需要将-ms-flex: 0 1 auto添加到left，因此它是允许缩小。

由于IE11和其他浏览器的默认值为0 1 auto，因此它们按原样运行。

Fiddle demo

Stack snippet

.wrapper {
  background: tomato;
  width: 100px;
  display: -ms-flexbox;                     /*  IE10  */
  display: flex;
}

.left {
  -ms-flex: 0 1 auto;                       /*  IE10  */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.right {

}

<div class=wrapper>
  <div class="left">
    title title title title
  </div>
  <div class="right">
    123
  </div>
</div>

Answer 2

这是一个不使用flexbox但使用display:table：

的想法

＆＃13;

.wrapper {
  background: tomato;
  width: 100px;
  display: table;
}

.left {
  display: table-cell;
  position: relative;
  width: 100%;
}

.left span {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.right {
  display: table-cell;
}

＆＃13;

<div class=wrapper>
  <div class="left">
    <span>
    title title title title title title
   </span>
  </div>
  <div class="right">
    123
  </div>
</div>

＆＃13;

IE 10弹性框和文本截断

2 个答案: