html - 对于伪元素，省略号在 Firefox 中无法正常工作

Question

我想在一些文本之后插入一行，但是一旦它达到最大宽度(170 像素)我想显示省略号。

但在 firefox 中每次它都显示我不想要的省略号。

我想在 Firefox 中像在 Chrome 和 IE 中一样工作。

div {
  max-width: 170px;
  background-color: #c7bdbd;
}

h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h1:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-right: -100%;
  border-bottom: 1px solid #000;
}

<div>
  <h1>Title</h1>
  <h1>Longer Title</h1>
</div>

Answer 1

你可以绝对定位伪元素。我认为问题在于省略号样式是 firefox 将内联伪元素视为文本并触发省略号，但是它随后将省略号附加到实际文本。将绝对位置应用于伪元素将停止此行为。

更新:进一步阅读后，它实际上是 chrome 中的一个错误。 Firefox 正确解释了 overflow:ellipsis; 的规范。

https://bugzilla.mozilla.org/show_bug.cgi?id=1346436

div {
  max-width: 170px;
  background-color: #c7bdbd;
}

h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position:relative;
}

h1:after {
  content: '';
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #000;
  position:absolute;
  bottom:8px;
}

<div>
  <h1>Title</h1>
  <h1>Longer Title</h1>
</div>