Question

我正在尝试设置一个布局，如果/当空间用完时，左侧列中的文本将被截断，但右侧列中的文本将始终显示为完整。这个codepen准确显示了应该发生的事情 -

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

根据@GregMcMullen的建议，caniuse是一个很棒的工具。但是，为了使这项工作适用于IE（在IE10和11上测试），你会遗漏一些东西：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用flexbox进行CSS截断：IE 10/11

2 个答案: