text-overflow in loading content

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.