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

时间:2018-04-09 06:38:53

标签: javascript html css reactjs

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

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

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

它在Chrome上运行良好。

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

  text-overflow: ellipsis;

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

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

1 个答案:

答案 0 :(得分:2)

这是我为你的案例制作的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/

希望这有帮助! 干杯!