Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kathy Manchester
Kathy Manchester
1,541 Points

Text overflow challenge

I'm asked: The link's container is set to hide its overflow and it's not allowing the text to wrap, so the link appears to be cut off. Select the paragraph with the class 'link' and set its text overflow to display an ellipsis.

And, I've entered:

.text-overflow: { text-overflow: ellipses;}

Would someone mind just pointing me in the right direction? I'm not asking for the answer, just some guidance. Thank you!

7 Answers

Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points 
/* Complete the challenge by writing CSS below */
    .link{
      text-overflow:ellipsis;}

I have just used this and it worked fine (spelt wrong earlier)

G

Kathy Manchester
Kathy Manchester
1,541 Points

Oh, my gosh! It was a spelling error. D'oh on me!!

Thank you. :-)

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Hope you dont mind the answer lol

.link {
text-overflow:ellipses;
}

G

Kathy Manchester
Kathy Manchester
1,541 Points

I don't thanks! =)

This is what I entered:

.link { text-overflow:ellipses; }

It has red dots under "text-overflow" and keeps telling me, "Bummer! null."

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Your more than welcome Kathy - I do it all the time.

G

Kathy Manchester
Kathy Manchester
1,541 Points
Kathy Manchester
Kathy Manchester
1,541 Points

I tried this:

.link { white-space: nowrap; overflow: hidden; text-overflow: ellipses; }

And, it told me: "Bummer! Check the text-overflow declaration in your CSS."

Ritchie Altamirano
Ritchie Altamirano
1,886 Points
Ritchie Altamirano
Ritchie Altamirano
1,886 Points

I'm also having problems with the red dotted line under "text-overflow"... please help

Ed Young
Ed Young
14,340 Points
Ed Young
Ed Young
14,340 Points

text-overflow is not being recognized by the editor. Please help! Thanks!

James Barnett
James Barnett
39,199 Points

Ed Young -

There's probably a spelling error in your code, triple check it. If you are still having issues, post your code and link to the challenge in a new thread.

Ed Young
Ed Young
14,340 Points
Ed Young
Ed Young
14,340 Points

Thanks! Got it!