0

Hi the following code works perfectly in Chrome and Firefox but I cannot make it work in IE. I have tried display: -ms-flexbox, but it does not help.

Html:

<div class="contener">
  <span class="editableLabel">
    <span class="contentTrimmed">aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll mmmm nnnn</span>
  </span>
</div>

CSS:

.contener {
  width: 300px;
}

.editableLabel {
    display: flex;
}

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

fiddle

The result I want to obtain is the trimmed text if it is longer than 300px.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
sashafierce
  • 83
  • 1
  • 11

2 Answers2

0

.contener {
  width: 300px;
}

.editableLabel {
    display: flex;
}

.contentTrimmed {
   white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;


}
<div class="contener">
  <span class="editableLabel">
    <span class="contentTrimmed">aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll mmmm nnnn</span>
  </span>
</div>
satwick
  • 135
  • 9
  • white-space: -webkit-pre-wrap; this code is there ..i have done it crome ,modizilla,IE9,10,11 and safari, – satwick Aug 16 '16 at 10:02
  • are you trying to wrap it or ,,u trying to create a new web browser the word "-webkit;" itself describes it is for chrome – satwick Aug 16 '16 at 10:04
  • your solution breaks the content into the other line but I want to trim it so if it is longer than 300px 3 dots will appear at the end. – sashafierce Aug 16 '16 at 10:06
0

    .contener {
         width: 300px;
       }  

    .editableLabel {
        display: flex;
   }

     .contentTrimmed {
          display: inline-block;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
          max-width: 300px;
      }
    <div class="contener">
      <span class="editableLabel">
        <span class="contentTrimmed">aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll mmmm nnnn</span>
      </span>
    </div>
satwick
  • 135
  • 9