CSS overflow-x

CSS overflow-x

The CSS overflow-x property specifies whether to clip the content, render a scrollbar, or display overflow content when it overflows the horizontal axis of an element.

There are four possible values for overflow-x:

  1. visible: Default value. The content is not clipped and may be rendered outside the box.
  2. hidden: The content is clipped and no scrollbars are provided.
  3. scroll: The content is clipped and scrollbars are provided to view the rest of the content.
  4. auto: Similar to scroll, but only provides scrollbars when necessary.

Let's see some examples:

Result: 

    /* CSS */
    .box {
      width: 200px;
      height: 100px;
      overflow-x: scroll;
    }
This is some long horizontal text that will overflow the box.
Result: 

    /* CSS */
    .box {
      width: 200px;
      height: 100px;
      overflow-x: hidden;
    }
This is some long horizontal text that will be clipped.

Feel free to experiment with different values for overflow-x to see how it affects the content overflow in your elements!