Text-Overflow Property Lab
Easy
25
84.7% Acceptance
In this lab, you will work with the text-overflow
CSS property to handle overflowing text inside a fixed-width container. You need to demonstrate various aspects of handling overflowing text like hiding the excess text and showing ellipsis (...) when the text overflows the container.
To achieve this, you will follow these tasks:
- Add some long text to a paragraph element with id 'text'
- Create a div container with id 'container' and set its width to 300px
- Set the paragraph's
white-space
property tonowrap
to prevent text from wrapping - Apply the
text-overflow: ellipsis
andoverflow: hidden
properties to the paragraph to hide the overflowing text and show ellipsis
Note: You can use inline CSS or create a separate CSS file to apply styles to elements.