CODEWITHSUNDEEP
htmlcssflexboxinternet-explorer-10
user3452568
user3452568

Reputation: 283

IE 10 flex box and text truncate

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

I have a DIV (wrapper) with 2 DIVs inside: left and right.

wrapper's width is known. I want to truncate text in left DIV if it doesn't fit. Text in right should be always visible. I tried several techniques here, but the only one is working is based on flex box. Unfortunately it doesn't work on IE10. I used -ms- prefixes, without success.

Is there any way to make it work on IE10?

Upvotes: 0

Views: 871

Answers (2)

Asons
Asons

Reputation: 87191

I can't test this on IE10 myself, though since its -ms-flex defaults to 0 0 auto, you will need to add -ms-flex: 0 1 auto to the left, so it is allowed to shrink.

And as the default on IE11 and the rest of the browsers is 0 1 auto, they work as is.

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>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272744

Here is an idea without the use of flexbox but using 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>

Upvotes: 0

Related Questions