javascript - CSS:文本溢出:带有 reactJS 和 IE 的省略号

Question

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

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

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

它在 Chrome 上运行良好。

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

  text-overflow: ellipsis;

并再次启用 -> 在 IE 中运行良好。我认为问题是因为 IE 在更改内容文本后不会重新加载任何内容。

有人知道这个案例吗？

Answer 1

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

HTML:

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

CSS:

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

JS:

setTimeout( function (){
  document.getElementById('test').innerHTML='New long text coming here to test ellipsis';}, 5000);

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

如果是IE10，IE9你可以试试加:“-ms-text-overflow: ellipsis;”

这是与 React 相同的代码: https://jsfiddle.net/69z2wepo/168244/

希望对您有所帮助! 干杯!