ParkerDigital ParkerDigital - 4 months ago 44
CSS Question

CSS truncation with flexbox: IE 10/11

I'm trying to set up a layout where the text in the left-hand column will become truncated if/when it runs out of space, but the text in the right-hand column will always display in full. This codepen shows exactly what should happen -

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
}


This works perfectly in most of the modern browsers I need to support, but I can't work out how to get this working in IE10 and IE11, since I have very limited experience working with flexbox. Can anyone help?!

Thanks,
Robin

Answer

As recommended by @GregMcMullen, caniuse is a great tool. There's a few things you were missing, though, to make this work for IE (tested on IE10 and 11):

  1. .action needs display: block and overflow: hidden
  2. All flexbox properties should be prefixed with -ms. -ms-flexbox is for IE10, while -ms-flex is for IE11.
  3. .subtitle didn't need the extra rules you had

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