Question

我想在一些文字之后插入一行但是一旦达到最大宽度（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>

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>

Ellipsis在Firefox中无法正常运行伪元素

1 个答案: