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!

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

Yusuf Bagha
Yusuf Bagha
24,376 Points
Posted by Yusuf Bagha
Yusuf Bagha
24,376 Points

How To Make An Element Take Up A Certain Space And No More

I'm currently building a site where in many instances the user puts in information. However, when the content is too long the content goes to the next line. I don't want this to happen. If the content for a specific element is too long it should just say "...".

2 Answers

Tobias Bjerrome Ahlin
Tobias Bjerrome Ahlin
9,742 Points

If the container has a set size, the text should truncate on overflow if you add these styles:

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
Yusuf Bagha
Yusuf Bagha
24,376 Points
Yusuf Bagha
Yusuf Bagha
24,376 Points

Thanks, that helped a lot

Mihail Petkov
Mihail Petkov
8,892 Points
Mihail Petkov
Mihail Petkov
8,892 Points

Hello, I have a similar question but I want to put "..." on the second line of text. Is this possible ? For example: Line 1 - Content Line 2- Conte...

Thanks !