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 CSS Foundations Text, Fonts, and Lists More Text Properties: Part 2

Vladimir Miletic
Vladimir Miletic
6,201 Points
Posted by Vladimir Miletic
Vladimir Miletic
6,201 Points

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 o

need help with this?

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>More Text Properties</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div>
        <h3>
            CSS3 recently introduced a new set of dynamic units for sizing elements! 
        </h3>
        <p class="link">
            Visit link: <a href="#">http://www.allaboutfrontenddesign.com/awesome_articles/december/the-longest-title-for-an-article-ever-for-real</a>
        </p>
    </div>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */
.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.word-wrap {
word-wrap: break-word;
}

1 Answer

Paul Yabsley
Paul Yabsley
46,713 Points
Paul Yabsley
Paul Yabsley
46,713 Points

Hi Vladimir

The problem is that you aren't selecting the paragraph that contains the link correctly. It looks like you are using .text-overflow as the name of the class you are selecting but you need to select the paragraph with the .link class. When you have selected the .link class you just need to use the text-overflow property and set it to ellipsis.

.link {
  text-overflow: ellipsis;
}