0

http://jsfiddle.net/ysfqk9wL/2/

I made a demo up there. I am going for the itunes effect. When a title is too long and gets cut off. So when the user hovers over it will show the rest of the text.

I am using this: 

    @mixin text-overflow() {
      -o-text-overflow: ellipsis;
      -ms-text-overflow: ellipsis;
          text-overflow: ellipsis;
}
li p {
    width: 250%;
    text-align: left;
    position: absolute;
    left:5px;
        @include text-overflow();
}

The JS is working just fine but in my CSS I want it to show "..." on the end. I am using text-overflow: ellipse; but it is not working for me.

Any ideas? Please view the link.

Christian4423
  • 1,746
  • 2
  • 15
  • 25
  • They aren't working because you have Sass mixins here but you aren't importing Sass in your code, so the CSS doesn't know how to handle any of the @stuff. – TylerH Oct 15 '15 at 13:57
  • Are you sure? If I inspect element and go to that element, the styles are there. Also, when I applied it as normal css, no change was made. Could you make a branch off my fiddle with your fix so I can better understand your statement? – Christian4423 Oct 15 '15 at 14:07
  • The text also needs set to `white-space: nowrap;` for ellipsis. – Stickers Oct 15 '15 at 14:08
  • I added both of your guys changes to http://jsfiddle.net/ysfqk9wL/4/ and no such luck – Christian4423 Oct 15 '15 at 14:13
  • @Christian4423 I don't have a fix, I just don't see the Sass library imported anywhere, unless jQuery Edge includes it now? – TylerH Oct 15 '15 at 14:13
  • No, if you go into the side nav on jsfiddle and select languages you can tell it to render sass – Christian4423 Oct 15 '15 at 14:15
  • 2
    See this basic [demo](http://jsfiddle.net/2zjr15gp/) of it, no animation. – Stickers Oct 15 '15 at 14:17
  • @Pangloss Thank you so much! The client isn't too worried about the animation. That was me trying to go a little out of scope. This is more important as it was on the mockup. Thanks again! – Christian4423 Oct 15 '15 at 14:27
  • Possible duplicate of [CSS text-overflow: ellipsis; not working?](http://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working) – Stickers Oct 15 '15 at 14:44

0 Answers0