قواعد التعامل مع المسافات البيضاء في HTML
تتضمن "المسافة البيضاء" في HTML ثلاثة أنواع: مسافة (مسافة)، وعلامة تبويب (علامة تبويب)، وتغذية سطر (CR/LF).
نحن نعلم أنه افتراضيًا، يتم عرض أحرف المسافات البيضاء في كود مصدر HTML كمسافات، وسيتم التعامل مع أحرف المسافات البيضاء المتتالية المتعددة على أنها حرف واحد، أو بمعنى آخر، سيتم دمج عدة أحرف مسافات بيضاء متتالية.
ومع ذلك، في بعض الأحيان، نأمل أن يتم عرض مسافات متتالية متعددة في كود مصدر HTML بشكل واقعي في متصفح الويب، أو نحتاج إلى فواصل الأسطر في الكود المصدري لتعمل كفواصل أسطر حقيقية. لذلك، اكتشفنا العلامة <pre>، والتي يمكنها حقًا استعادة الوضع الحقيقي لأحرف المسافة البيضاء في نصها الداخلي.
لذلك غالبًا ما نضع جزءًا من النص يمثل رمز الكمبيوتر في العلامة <pre>، وسيظهرون المسافة البادئة الخاصة بهم وتأثيرات التفاف الأسطر في المتصفح، دون الحاجة إلى إضافة أنماط وعلامات إضافية للتحكم في المسافة البادئة وفواصل الأسطر.
مع استمرار فهمنا لـ CSS في التعمق، نجد أنه اتضح أن كل هذا يتم ترتيبه بواسطة خاصية المساحة البيضاء. السبب الذي يجعل العنصر <pre> ساحرًا للغاية هو أنه يحتوي على النمط الافتراضي {white-space: pre;}.
سمة المسافة البيضاء
يتم استخدام سمة المسافة البيضاء في CSS لتعيين قواعد المعالجة لأحرف المسافات البيضاء في النص، بما في ذلك: ما إذا كان سيتم دمج أحرف المسافات البيضاء، وما إذا كان سيتم الاحتفاظ بفواصل الأسطر، وما إذا كان سيتم السماح بالتفاف الأسطر تلقائيًا. يتم عرض السلوكيات المختلفة لكل قيمة سمة في الجدول التالي:
قائمة قيمة سمة المسافة البيضاء
| قيمة السمة | مسافة بيضاء | حرف السطر الجديد | التفاف الخط التلقائي | ظهرت لأول مرة في |
|---|---|---|---|---|
normal | دمج | أهمل | يسمح | سي اس اس 1 |
nowrap | دمج | أهمل | غير مسموح به | سي اس اس 1 |
pre | احتياطي | احتياطي | غير مسموح به | سي اس اس 1 |
pre-wrap | احتياطي | احتياطي | يسمح | سي اس اس 2.1 |
pre-line | دمج | احتياطي | يسمح | سي اس اس 2.1 |
( ملاحظة : في CSS1/2، لا يمكن تطبيق سمة المسافة البيضاء إلا على عناصر مستوى الكتلة؛ وفي CSS 2.1، يمكن تطبيقها على جميع العناصر.)
إذا أردنا أن يكون لعنصر الحاوية سلوك معالجة مسافات بيضاء مشابه لعنصر <pre>، فما عليك سوى تعيين نمط {white-space: pre;} له.
الحاجة إلى التفاف مسبق
دعنا نشرح أولاً سلوك "التفاف الكلمات التلقائي" في الجدول أعلاه، وهو يشير إلى تدفق النص داخل العنصر الذي يتم كتابته في اتجاه النص عندما يواجه تدفق النص حدًا يحد من امتداده المستمر، سواء كان ذلك للالتفاف أو لا. "عدم السماح بالتفاف الكلمات" يعني أن تدفق النص سوف يتجاوز العنصر.
ولذلك، فإن النمط {white-space: pre;} لا يلبي توقعاتنا في بعض الأحيان. على سبيل المثال، في بعض المواقف التي لا تتطلب صرامة خاصة، أو عند تنسيق بعض مقتطفات التعليمات البرمجية غير الحساسة لفواصل الأسطر (مثل HTML أو CSS)، لا نريد أن يتسبب سطر طويل من التعليمات البرمجية في مقتطف التعليمات البرمجية في حدوثه عنصر الحاوية للتمرير أفقيًا لأنه سيكون من الصعب قراءته. نأمل في هذه الحالة أن يتم التفاف التعليمات البرمجية الطويلة تلقائيًا.
في هذا الوقت، بمقارنة الخصائص السلوكية المختلفة لكل قيمة سمة في الجدول أعلاه، سنجد أن قيمة سمة الالتفاف المسبق تبرز - وهذا هو بالضبط ما نحتاجه.