Text-Overflow Property Lab
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
nowrapto prevent text from wrapping
- Apply the
overflow: hiddenproperties 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.