IE 11 不在元素上应用省略号答案

【问题标题】：IE 11 not applying ellipsis on elementIE 11 不在元素上应用省略号
【发布时间】：2020-11-17 19:37:31
【问题描述】：

我在网格中有一个元素，它在除 IE11 之外的所有浏览器中应用截断“...”。

元素的初始样式是

max-width: 100%;
overflow: hidden;
text-overflow: ellipsis:
white-space: nowrap;

我尝试添加 -ms-text-overflow、word-wrap 和 display: block 无济于事，以及在相关元素上添加 readonly。

如何让 IE 正确应用截断？

【问题讨论】：

还有人用IE吗？
@delmin 不幸的是，他们这样做了。但从积极的一面来看，根据我在客户数据中看到的指标，它比去年迅速下降。
@Dejan.S 我以为恐龙已经灭绝了。
@delmin 是的，我希望是这样！我们不会加倍努力让 IE11 中的所有内容看起来都一样，功能是的，但不是视觉效果。
@Dejan.S 我在屏幕中间很好地显示了“不支持 IE”。显然不是所有网站的完美解决方案，但它绝对有助于杀死它

标签： css reactjs internet-explorer

【解决方案1】：

我不确定将哪种样式应用于您的网格以及您尝试在哪个元素上应用省略号。

我用这个示例代码做了一个测试，它可以在 IE 11 浏览器上运行。

代码：

<!DOCTYPE html>
<html>
<head>
<style> 

div.b {
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
}
</style>
</head>
<body>

<div class="b">Hello world!</div>

</body>
</html>

使用 IE 11 浏览器输出：

您可以尝试将此代码应用于您的原始代码，看看是否有助于解决问题。

如果问题仍然存在，请尝试提供可能导致 IE 11 浏览器出现问题的示例代码。我们将尝试对其进行检查和测试，并尝试为其提供建议。

【讨论】：

【解决方案2】：

在大多数情况下，“省略号”只会在元素设置了（最大）宽度时显示（固定单位的“硬限制”）。要使省略号起作用，所有三个属性都是必需的。这在 IE11 中也无需额外修改即可工作。

尝试以下两种情况：

首先.single, .multiple { width: 100% } 并调整浏览器大小：没有省略号
然后body { max-width: 100px } .single, .multiple { width: 100% }：再次省略

因此，您需要一些“硬限制”。

.single,
.multiple { width: 100px } /* or max-width */

.single,
.multiple>* {
  white-space: nowrap;     /* [MANDATORY] */
  overflow: hidden;        /* [MANDATORY] */
  text-overflow: ellipsis; /* [MANDATORY] */
  border: 1px solid rgba(0,0,0,.4);
}

<div class="single">this is single element</div>
<div class="multiple">
    <p>this is multiple 1</p>
    <p>this is multiple 2</p>
    <p>this is multiple 3</p>
</div>

【讨论】：

【解决方案3】：

在您想要省略号的班级上尝试此解决方法：

.ellipsis-stuff {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 300px;
}

.ellipsis-stuff:before {
  content: ''; /* IE9 ellipsis fix */
}

https://jsfiddle.net/fokjuLhp/9/

【讨论】：

我会试一试，但是在这里设置最大宽度的宽度有什么原因吗？
没有其他理由更容易构建示例。现在如果我的
标签超过 300px，它将溢出，触发省略号
不确定您如何在 IE11 上测试 Fiddle，但 <p> 中的所有点都混淆了您的解决方案在任何浏览器中都没有显示“省略号”的事实。您需要将.ellipsis-stuff 更改为.ellipsis-stuff>*，它可以在IE11 中运行，即使没有:before 规则。
我明白了，多么愚蠢的错误。我会更新我的小提琴