IE 10 弹性框和文本截断

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 中的文本应始终可见。我在这里尝试了几种技术，但唯一有效的是基于 flex box 的技术。不幸的是，它不适用于 IE10。我使用 -ms- 前缀，但没有成功。

有什么方法可以让它在 IE10 上运行吗？

Answer 1

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

的想法

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

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

Answer 2

我自己无法在 IE10 上测试它，但由于它的 -ms-flex 默认为 0 0 auto，您需要将 -ms-flex: 0 1 auto 添加到 left，所以允许收缩。

作为 IE11 和其他浏览器的默认设置 0 1 auto，它们按原样工作。

Fiddle demo

堆栈片段

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

IE 10 弹性框和文本截断

IE 10 flex box and text truncate

html

css

flexbox

internet-explorer-10