Demo of Text Overflow

There are a few setting that can be used to control the text overflow :-

overflow:visible; The overflow is not clipped. It renders outside the element's box. This is default
overflow:hidden; The overflow is clipped, and the rest of the content will be invisible
overflow:scroll; The overflow is clipped, but a scroll-bar is added to see the rest of the content
overflow:auto; If overflow is clipped, a scroll-bar should be added to see the rest of the content

Above are the main settings but you can also have :-

overflow:initial; Sets this property to its default value.
overflow:inherit; Inherits this property from its parent element.

Using the default settings (width: auto) and (overflow:visible) This is some text for box 1 in order to show how the text overflow works. Additional text to add to the length of my box as I need it to go outside the box (maybe).

Using the settings (width: 100px) and (overflow:visible) This is some text for box 1 in order to show how the text overflow works. Additional text to add to the length h of my box as I need it to go outside the box (maybe).

Using the settings (width: 80%) and (overflow:visible) This is some text for box 1 in order to show how the text overflow works. Additional text to add to the length of my box as I need it to go outside the box (maybe). A bit more of my text as I need it to go outside the box (maybe).

Using the settings (width: 100px) and (overflow:scroll) This is some text for box 1 in order to show how the text overflow works. Additional text to add to the length h of my box as I need it to go outside the box (maybe).

Using the settings (width: 80%) and (overflow:scroll) This is some text for box 1 in order to show how the text overflow works. Additional text to add to the length h of my box as I need it to go outside the box (maybe). A bit more of my text as I need it to go outside the box (maybe).

Using the settings (width: 100px) and (overflow:hidden) This is some text for box 1 in order to show how the text overflow works. Additional text to add to the length.

Using the settings (width: 80%) and (overflow:hidden) This is some text for box 1 in order to show how the text overflow works. Additional text to add to the length. A bit more of my text as I need it to go outside the box (maybe). A bit more of my text as I need it to go outside the box (maybe). Ooh a lot of text this is.

Using the settings (width: 100px) and (overflow:auto) This is some text for box 1 in order to show how the text overflow works. Additional text to add to the length.

Using the settings (width: 80%) and (overflow:auto) This is some text for box 1 in order to show how the text overflow works. Additional text to add to the length. A bit more of my text as I need it to go outside the box (maybe). A bit more of my text as I need it to go outside the box (maybe).