CODEWITHSUNDEEP
htmlcssinternet-explorer
user254197
user254197

Reputation: 881

IE CSS doesn't work but in Firefox it works

my aim is to show the entire text when hovering over it otherwise trunicate and hide when not hovering over it.

This code works without trouble in Firefox, but in IE it does not work correct( when hovering over it(in IE) content is still trunicated, but it should be displayed without 3 dots like 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 this Text is to big, trunicate until hovering over it and than give the visibility back.
                            </div>
                            <div class="col-md-3 BWTextLeft BWPaddingLeft BWPaddingRight">
                                (<small> Date</small>)
                            </div>
                        </div>
                    </div>

What can I do ? For testing I use IE 10, but it should work for >= IE8 .

Upvotes: 0

Views: 82

Answers (1)

Abhitalks
Abhitalks

Reputation: 28387

In order to reset the text-overflow: ellipsis you have to clip it.

For example: http://jsfiddle.net/abhitalks/gGYnV/

Suppose you have a div:

<div class="test">this is a very long text</div>

And it is styled like this:

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

Then, in order to reset it you need to:

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

This will work in all browsers, including IE 8.

Alternatively, you could reset to white-space: normal.

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

.

Upvotes: 3

Related Questions