Question

我的目的是在将鼠标悬停在整个文本上时显示整个文本，否则在没有悬停在其上时会隐藏并隐藏。

此代码在Firefox中没有问题，但在IE中它无法正常工作（当悬停在它上面时（在IE中）内容仍然是有效的，但它应该显示没有3点像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>

我该怎么办？为了测试，我使用IE 10，但它应该适用于＆gt; = IE8。

Answer 1

要重置text-overflow: ellipsis，您需要clip。

例如：http://jsfiddle.net/abhitalks/gGYnV/

假设您有div：

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

它的风格如下：

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

然后，为了重置它，您需要：

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

这适用于所有浏览器，包括IE 8。

或者，您可以重置为white-space: normal。

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

IE CSS不起作用，但在Firefox中它起作用

1 个答案: