CODEWITHSUNDEEP
htmlcssfirefox
Mahi
Mahi

Reputation: 1727

Ellipsis not working correctly in Firefox for pseudo element

I want to insert a line after some text but once it reaches max-width(170px) i want to show ellipsis.

but in firefox everytime it showing ellipsis which I don't want.

I want to work same in firefox the way its working in chrome and 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>

Upvotes: 1

Views: 1153

Answers (1)

WizardCoder
WizardCoder

Reputation: 3461

You can absolute position the pseudo element. I think the issue is that the ellipsis style is firefox is treating the inline pseudo element as text and triggering the ellipsis, however it is then appending the ellipsis to the actual text. Applying absolute position to the pseudo element will stop this behavior.

UPDATE: After reading about this further it is actually a bug in chrome. Firefox is correctly interpreting the specification for 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>

Upvotes: 1

Related Questions