省略号在 Firefox 中对于伪元素无法正常工作答案

【问题标题】：Ellipsis not working correctly in Firefox for pseudo element省略号在 Firefox 中对于伪元素无法正常工作
【发布时间】：2017-06-19 18:13:14
【问题描述】：

我想在一些文本之后插入一行，但一旦达到最大宽度（170px）我想显示省略号。

但在 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>

【问题讨论】：

Firefox 无法将宽度正确解释为 100%，因此始终显示椭圆。要检查这一点，请尝试为伪类提供显式宽度
::after 由于其宽度太大而无法放入 h1。尽管有负的右边距。你能提供一个例子来说明为什么需要 ::after 吗？删除它（或它的某些属性，如 display 或 width）使 sn-p 按预期工作。
@MrLister after 伪元素需要在文本之后显示行。
@Mahi 什么线路？我认为这一切都取决于此。它有多宽，它需要在一个内联块中还是可以简单地内联等等。
@ShrutiAgarwal 如果我为伪元素指定宽度，那么长文本或短文本的线宽将相同。我的意思是如果我有长文本，我必须显示更少的行，反之亦然。

标签： html css firefox

【解决方案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>

【讨论】：

你是我的英雄。谢谢:)
bdw 我认为它在 Firefox 中的错误：P
我也是，但所有内联元素，包括带有overflow:ellipsis; 的伪元素，都应该在溢出父级时触发省略号。问题是伪元素没有内容，所以省略号没有附加任何内容。