قم بإنشاء مربع يحتوي على نص قابل للتمرير باستخدام CSS و HTML
مربع التمرير HTML هو مربع يضيف أشرطة التمرير إلى الجانب الأيمن والأسفل عندما تكون محتويات الصندوق أكبر من أبعاد الصندوق. بمعنى آخر ، إذا كان لديك مربع يمكن أن يتسع لحوالي 50 كلمة ، وكان لديك نص مكون من 200 كلمة ، فسيضع مربع تمرير HTML أشرطة التمرير لأعلى للسماح لك بمشاهدة 150 كلمة إضافية. في HTML القياسي ، ما عليك سوى دفع النص الإضافي خارج المربع.
جعل HTML التمرير سهل إلى حد ما. كل ما تحتاجه هو ضبط عرض العنصر الذي تريد تمريره وارتفاعه ، ثم استخدم الخاصية overflow CSS لتعيين كيفية حدوث التمرير.
ماذا تفعل مع نص إضافي؟
عندما يكون لديك نص أكثر مما يتناسب مع المساحة على التخطيط الخاص بك ، لديك بعض الخيارات:
- أعد كتابة النص بحيث يكون أقصر ويصلح.
- اسمح للنص أن يتدفق إلى ما وراء الحدود ويأمل في أن يثبّت التصميم لدعمه.
- قطع النص حيث تفيض.
- إضافة أشرطة التمرير (عادةً الرأسية للنص) بحيث يتم تمرير المسافات لإظهار النص الإضافي.
الخيار الأفضل هو عادة الخيار الأخير: إنشاء مربع نص التمرير. ثم يمكن قراءة النص الإضافي ، ولكن لا يتم اختراق التصميم الخاص بك.
HTML و CSS لهذا سيكون:
الفائض: auto؛ يخبر المتصفح بإضافة أشرطة التمرير إذا كانت هناك حاجة للحفاظ على النص من تفيض حدود div. ولكن لكي يعمل هذا ، تحتاج أيضًا إلى خصائص نمط العرض والارتفاع المحددة في div ، بحيث تكون هناك حدود لتجاوزها.
يمكنك أيضًا قطع النص عن طريق تغيير السعة الزائدة: auto؛ لتجاوز: مخفي ؛. إذا تركت خاصية الفائض ، فسوف ينتشر النص فوق حدود div.
يمكنك إضافة أشرطة التمرير إلى أكثر من مجرد نص
إذا كان لديك صورة كبيرة ترغب في عرضها في مساحة أصغر ، يمكنك إضافة أشرطة التمرير حولها بنفس الطريقة التي تستخدمها مع النص.
في هذا المثال ، تكون الصورة 400x509 داخل فقرة 300x300.
الجداول يمكن أن تستفيد من أشرطة التمرير
من الصعب جدًا قراءة الجداول الطويلة للمعلومات بسرعة كبيرة ، ولكن عن طريق وضعها داخل حجم محدود ، ثم إضافة خاصية تجاوز السعة ، يمكنك إنشاء جداول تحتوي على الكثير من البيانات التي لا تستهلك مساحة كبيرة على صفحتك .
الطريقة الأسهل هي تمامًا مثل الصور والنص ، فقط أضف div حول الجدول ، واضبط عرض وارتفاع هذا div ، وأضف الخاصية overflow:
| الاسم | الهاتف | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... شيء واحد يحدث عند القيام بذلك هو شريط التمرير الأفقي عادةً يظهر لأن المستعرض يفترض أن الكروم من أشرطة التمرير تراكب الجدول. هناك العديد من الطرق لإصلاح هذا من تغيير عرض الجدول وغيرها. ولكن المفضلة لدي هي ببساطة إيقاف تشغيل التمرير الأفقي باستخدام خاصية تجاوز سعة CSS3 الخاصة بـ CSS. ما عليك سوى إضافة تجاوز السعة x: hidden؛ إلى div ، والتي من شأنها إزالة شريط التمرير الأفقي. تأكد من اختبار ذلك ، حيث قد يكون هناك محتوى يختفي. فايرفوكس يدعم استخدام العلامات TBODY لتجاوزميزة واحدة لطيفة حقا لمتصفح فايرفوكس هو أنه يمكنك استخدام خاصية الفائض على علامات الجدول الداخلي مثل tbody و thead أو tfoot. هذا يعني أنه يمكنك تعيين أشرطة التمرير على محتويات الجدول ، وتبقى خلايا الرأس مثبتة فوقها. هذا يعمل فقط في فايرفوكس ، وهو أمر سيئ للغاية ، ولكنه ميزة رائعة إذا كان القراء يستخدمون فايرفوكس فقط. استعرض هذا المثال في Firefox لترى ما أعنيه.
|