مثال على خاصية CSS overflow-x - محرر أمثلة عبر الإنترنت (oldtoolbag.com)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>مثال على خاصية overflow-x في CSS - أساسيات التعليمات(oldtoolbag.com)</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>غير حجم div لتشاهد كيف يعمل</h1>
  <h2>overflow-x: scroll</h2>
  <div class="scroll">
      <p>
          يمكنك استخدام شريط التمرير الأفقي لرؤية المحتوى الزائد.
           يمكنك استخدام شريط التمرير الأفقي لرؤية المحتوى الزائد.
           يمكنك استخدام شريط التمرير الأفقي لرؤية المحتوى الزائد.
           يمكنك استخدام شريط التمرير الأفقي لرؤية المحتوى الزائد.
      </p>
  </div>
  <h2>overflow-x: hidden</h2>
  <div class="hidden">
      <p>
            المحتوى الذي يتجاوز الحافة الأفقية يُخفى.
           المحتوى الذي يتجاوز الحافة الأفقية يُخفى.
           المحتوى الذي يتجاوز الحافة الأفقية يُخفى.
           المحتوى الذي يتجاوز الحافة الأفقية يُخفى.
           المحتوى الذي يتجاوز الحافة الأفقية يُخفى.
           المحتوى الذي يتجاوز الحافة الأفقية يُخفى.
      </p>
  </div>
</body>
</html>