Text-Overflow Property Lab

Easy
291
2
85.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:

  1. Add some long text to a paragraph element with id 'text'
  2. Create a div container with id 'container' and set its width to 300px
  3. Set the paragraph's white-space property to nowrap to prevent text from wrapping
  4. Apply the text-overflow: ellipsis and overflow: 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.