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

Question

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

元素的初始样式是

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

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

如何让 IE 正确应用截断？

Answer 1

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

.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/

Answer 2

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

尝试以下两种情况：

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

因此，你需要一些'hard limit'。

.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>

Answer 3

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

我用这个示例代码进行了测试，它可以在 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 浏览器中产生问题的示例代码。我们会尝试检查和测试它并尝试为它提供建议。

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

IE 11 not applying ellipsis on element

css

internet-explorer

reactjs