قواعد التعامل مع المسافات البيضاء في 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)، لا نريد أن يتسبب سطر طويل من التعليمات البرمجية في مقتطف التعليمات البرمجية في حدوثه عنصر الحاوية للتمرير أفقيًا لأنه من الصعب قراءته. نأمل في هذه الحالة أن يتم التفاف التعليمات البرمجية الطويلة تلقائيًا.
في هذا الوقت، بمقارنة الخصائص السلوكية المختلفة لكل قيمة سمة في الجدول أعلاه، سنجد أن قيمة سمة الالتفاف المسبق تبرز - وهذا هو بالضبط ما نحتاجه.