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

Miguel Agawin
Miguel Agawin
3,211 Points

text-overflow in loading content

Does adding the text-overflow attribute(s) of clip and/or ellipsis keep (hidden) content in the HTML from loading?

2 Answers

Brian MacDonald
Brian MacDonald
4,951 Points

Hello Miguel!

Perhaps you can provide some more information on what your goal is? And some code!

However from my use of the above, I have used a combination of the following:

On a website I developed, I have a small section roughly 200px wide - this section contains a list of top 100 listings (real estate also using JS and PHP). However I was limited in space for the output, and some addresses were quite long!

After putting a overflow: hidden; white-space: nowrap; text-overflow: ellipsis; and an overall width about 2/3 of the parent div I was able to make things fit. The result was something along these lines:

  • If the address fit: #1 Unit 1 15 address road, Sydney, CA
  • Address didn't fit: #2 Unit 17 1807 nowhere road, Syd ...

Essentially the HTML will still be rendered if I view the source code or inspect the element, however on the page everything was displayed clean and neat.

A few other tips: You can add a title to the elements html, on hover display the full contents of the ellipses content.

You could also achieve doing the above project with Javascript or PHP - however the method above that worked for me was a strict CSS/HTML method!

Let me know if this helps, or you need any further information.

Miguel Agawin
Miguel Agawin
3,211 Points

Yes, your example is clear which states "the HTML will still be rendered". Thank you!