Ellipsis not showing with fixed div with background color in Firefox

Question

Not much to comment here ... I'm trying to set the text-overflow to an ellipsis on a div, while having a fixed div with a background somewhere else on the page, which doesn't seem to be working in Firefox (but does work with Chrome) ... Here's the code :

.fixed {
  position: fixed;
  background-color: #fff;
}

.ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="fixed">
  asdf
</div>
<div class="ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

score 0 · Answer 1 · answered Mar 23 '17 at 13:19

0

use overflow: hidden and white-space: nowrap for the fixed div.

check the snippet

.fixed {
  position: fixed;
  background-color: #fff;
  top: 50px;
  
  width: 120px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  
}

.ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="fixed">
  this is the demo text to rere
</div>
<div class="ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

answered Mar 23 '17 at 13:19

Lucian

1,715
3
17
26

Thanks for the answer, but it doesn't seem to be working ... (still using Firefox) – Tristan Cottam Meulemans Mar 23 '17 at 13:39
Oh, sorry for not mentioning : it works in the code snippet, but not on a blank web page ... I can also see the ellipse in the snippet, but when I copy-paste it into Sublime Text and upload it to my website, it doesn't show up :/ – Tristan Cottam Meulemans Mar 23 '17 at 14:09
can you give the link of your website? it would be easier to investigate – Lucian Mar 23 '17 at 14:13
That's all the code right there. I just have the CSS between script tags and the HTML under it, nothing else. – Tristan Cottam Meulemans Mar 23 '17 at 14:26
but if the problem is on the website, we should take a look at it to understand the problem. – Lucian Mar 23 '17 at 14:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/138835/discussion-between-lucian-and-tristan-cottam). – Lucian Mar 23 '17 at 14:33

Ellipsis not showing with fixed div with background color in Firefox

1 Answers1