html - IE CSS doesn't work but in Firefox it works -

my aim show entire text when hovering on otherwise trunicate , hide when not hovering on it.

this code works without trouble in firefox, in ie not work correct( when hovering on it(in ie) content still trunicated, should displayed without 3 dots in firefox):

    .bwoverflownewshorizontal{     padding-left: 5px !important;     overflow: hidden;     white-space: nowrap;     text-overflow: ellipsis; } .bwoverflownewshorizontal:hover {     max-height: 300px;     overflow-x: scroll;     -ms-overflow-x: scroll;     padding-right:1px; } 

html:

                    <div class="item">                         <div class="carousel-caption">                             <div class="col-md-3 bwpaddingleft bwpaddingright bwtextright bwtextright">                                 <span class="bwhorizontalnewstickerheading">                                     heading                                 </span>                             </div>                             <div class="col-md-6 bwtextleft bwpaddingright bwoverflownewshorizontal">                                 if text big, trunicate until hovering on , give visibility back.                             </div>                             <div class="col-md-3 bwtextleft bwpaddingleft bwpaddingright">                                 (<small> date</small>)                             </div>                         </div>                     </div> 

what can ? testing use ie 10, should work >= ie8 .

in order reset text-overflow: ellipsis have clip it.

for example: http://jsfiddle.net/abhitalks/ggynv/

suppose have div:

<div class="test">this long text</div> 

and styled this:

.test {     width: 100px; height:50px;      overflow: hidden;     white-space: nowrap;     text-overflow: ellipsis; } 

then, in order reset need to:

.test:hover {     text-overflow: clip;     overflow-x: scroll; } 

this work in browsers, including ie 8.

alternatively, reset white-space: normal.

.test:hover {     white-space: normal;     overflow-x: scroll; } 

.