我的目的是在将鼠标悬停在其上时显示整个文本，否则在不悬停在其上时将其截断并隐藏。
这段代码在Firefox中可以正常工作，但是在IE中却无法正常工作（将鼠标悬停在IE上时，内容仍会被斜纹，但是在Firefox中应显示为无3点）：
.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，但它应该适用于> = IE8。
为了重置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;
}
。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句