CSS 使用 flexbox 截断：IE 10/11

Question

我正在尝试设置一个布局，其中左侧栏中的文本将被截断 if/when 它用完了 space，但右侧栏中的文本将始终完整显示。这个代码笔准确地显示了应该发生的事情 -

http://codepen.io/robinkparker/pen/oLQZqv

<div class="tile">
  <a class="action" href="#">
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
  </a>
  <a class="action action--r" href="#">
    <div class="sibling">&lt;sibling&gt;</div>
  </a>
</div>

.tile {
  border: 1px solid black
  display: flex
  margin: 1em 0
}

.action {
  border: 1px dashed black
  color: black
  flex-shrink: 1
  flex-grow: 1
  min-width: 0
  max-width: 100%
  padding: 1em
  text-decoration: none
}

.action--r {
  flex-grow: 0
  flex-shrink: 0
}

.subtitle {
  display: inline-block
  width: 100%

  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
}

这在我需要支持的大多数现代浏览器中都能完美运行，但我不知道如何在 IE10 和 IE11 中运行它，因为我使用 flexbox 的经验非常有限。有人可以帮忙吗？！

谢谢，罗宾

Answer 1

只需将 overflow: hidden 属性添加到 .action class（在 IE11 上测试）

.tile {
  border: 1px solid black;
  display: flex;
  margin: 1em 0;
}
.action {
  border: 1px dashed red;
  color: black;
  flex-shrink: 1;
  flex-grow: 1;
  min-width: 0;
  max-width: 100%;
  padding: 1em;
  text-decoration: none;
  overflow: hidden;
}
.action--r {
  flex-grow: 0;
  flex-shrink: 0;
}
.subtitle {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="tile">
  <a class="action" href="#">
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
  </a>
  <a class="action action--r" href="#">
    <div class="sibling">&lt;sibling&gt;</div>
  </a>
</div>

Answer 2

正如@GregMcMullen 所推荐的，caniuse 是一个很棒的工具。不过，要使此功能适用于 IE（在 IE10 和 11 上测试），您还缺少一些东西：

.action 需要 display: block 和 overflow: hidden
所有 flexbox 属性都应以 -ms 为前缀。 -ms-flexbox 用于 IE10，而 -ms-flex 用于 IE11。
.subtitle 不需要您拥有的额外规则

.tile {
  border: 1px solid black;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
}

.action {
  display: block;
  border: 1px dashed black;
  color: black;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1em;
  text-decoration: none;
  overflow: hidden;
}

.action--r {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="tile">
  <a class="action" href="#">
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
  </a>
  <a class="action action--r" href="#">
    <div class="sibling">&lt;sibling&gt;</div>
  </a>
</div>

CSS 使用 flexbox 截断：IE 10/11

CSS truncation with flexbox: IE 10/11

css

flexbox

internet-explorer-11

internet-explorer-10