Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations Text, Fonts, and Lists More Text Properties: Part 2

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

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;
}