CSS：text-overflow：带有reactJS和IE的省略号

Question

我在IE 11中遇到省略号问题。

我正在使用ReactJS从API渲染数据，这是我的CSS

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

它在Chrome上运行良好。

问题来自IE加载页面后，CSS无法正常工作，我看不到任何省略号。如果我使用inspect元素工具禁用行

  text-overflow: ellipsis;

并再次启用 - ＆gt;在IE中运作良好。我认为这个问题是因为IE在内容文本发生变化后没有重新加载任何内容。

有没有人对此案有所了解？

Answer 1

这是我为你的案例制作的IE11 JsFiddle

HTML：

if (newMessageTask == null)
   newMessageTask = state.OutgoingMessageQueue.TakeAsync();

CSS：

<h1 id="test">Initial long text coming  here to test ellipsis</h1>

JS：

h1 {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:150px;
 }
 h1:hover {
    overflow:visible;
 }

https://jsfiddle.net/cbppL/1277/

如果是IE10，IE9你可以尝试添加：“ - ms-text-overflow：省略号;”

这里的代码与react相同： https://jsfiddle.net/69z2wepo/168244/

希望这有帮助！ 干杯！