Live Demo: Example of CSS overflow-x property

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example of CSS overflow-x property</title>
  <style>
      div {
          width: 250px;
          height: 150px;
          border: 1px solid #cccccc;
      }
      div.scroll {            
          overflow-x: scroll;
      }
      div.hidden {
          overflow-x: hidden;
      }
      p {
          width: 350px;
      }
  </style>
</head>
<body>
  <h1>Play with the size of div boxes to see how it works</h1>
  <h2>overflow-x:scroll</h2>
  <div class="scroll">
      <p>
          You can view the overflowed content using horizontal scrollbar.
          You can view the overflowed content using horizontal scrollbar.
          You can view the overflowed content using horizontal scrollbar.
          You can view the overflowed content using horizontal scrollbar.

</p>
  </div>
  <h2>overflow-x:hidden</h2>
  <div class="hidden">
      <p>
          The content overflows at the horizontal edges is hidden.
          The content overflows at the horizontal edges is hidden.
          The content overflows at the horizontal edges is hidden.
          The content overflows at the horizontal edges is hidden.
          The content overflows at the horizontal edges is hidden.
          The content overflows at the horizontal edges is hidden.
          The content overflows at the horizontal edges is hidden.
      </p>
  </div>
</body>
</html>