عند القيام بتخطيط DivCSS، تحتاج إلى التحكم في النص، واليوم سأقدمه لك بشكل منهجي. هناك أربع خصائص في CSS تتحكم في فواصل الأسطر.
1. المساحة البيضاء
يمكنك تحقيق تأثير علامات PRE في HTML وتأثير noWrap للخلايا.
القواعد:
المساحة البيضاء: عادي قبل الآن
قيمة:
عادي: القيمة الافتراضية. طريقة المعالجة الافتراضية يعالج النص فواصل الأسطر تلقائيًا. إذا تم الوصول إلى حدود الحاوية، فسينتقل المحتوى إلى السطر التالي
pre: ستتم حماية الأسطر الجديدة وأحرف المسافات البيضاء الأخرى. تتطلب هذه القيمة الإعلان عن IE6+ أو !DOCTYPE كدعم للوضع المتوافق مع المعايير. إذا لم يحدد إعلان DOCTYPE وضعًا متوافقًا مع المعايير، فيمكن استخدام هذه السمة، ولكن لن يكون لها أي تأثير. والنتيجة تعادل الطبيعي. انظر الكائن المسبق
nowrap: يفرض عرض النص بالكامل على نفس السطر حتى نهاية النص أو مواجهة كائن br. انظر سمة noWrap
يوضح:
يضبط أو يسترد كيفية التعامل مع أحرف المسافة داخل الكائن.
يتم تجاهل أحرف المسافة البيضاء، مثل الأسطر الجديدة والمسافات وTAB بشكل افتراضي في مستندات HTML. عندما يتم تعيين هذه الخاصية إلى عادي أو Nowrap، يمكنك استخدام الكيان المسمى بدون مسافة التفاف لإضافة مسافات والعنصر br لإضافة فواصل أسطر. هذه الخاصية لها نفس التأثير على المحتوى الذي تعالجه باستخدام نموذج كائن المستند (DOM) كما هو الحال على المحتوى المعروض بواسطة IE.
تعمل هذه الخاصية على كائنات الكتلة.
الأنماط ذات الصلة:
تجاوز النص
يؤدي دمجها مع المسافة البيضاء إلى إلغاء الحاجة إلى كتابة برنامج لتحديد طول السلسلة. انقر هنا لعرض مثال.
القواعد:
تجاوز النص: مقطع القطع
قيمة:
مقطع: القيمة الافتراضية. لا تظهر علامات الإغفال (...)، ولكن ببساطة المحاصيل
علامة القطع: يعرض علامة القطع (...) عندما يتجاوز النص الموجود داخل الكائن
يوضح:
يقوم بتعيين أو استرداد ما إذا كان سيتم استخدام علامة القطع (...) لوضع علامة على تجاوز سعة النص داخل الكائن.
تؤثر هذه الخاصية فقط على تجاوز النص الغربي العادي في الاتجاه المضمن الأفقي. يحدث تجاوز السطر عندما يتجاوز النص الموجود داخل السطر العرض المتاح دون فرصة للالتفاف.
لفرض تجاوز السعة وتطبيق قيمة علامة الحذف، يجب على المؤلف تعيين خاصية المسافة البيضاء للكائن على nowrap.
إذا لم تكن هناك فرصة لفواصل الأسطر (على سبيل المثال، عرض حاوية الكائن ضيق وهناك نص طويل بدون فواصل أسطر معقولة)، فمن الممكن تجاوز السعة دون تطبيق Nowrap.
لكي يتم تطبيق قيمة علامة الحذف، يجب تعيين هذه الخاصية إلى كائن يحتوي على منطقة غير مرئية. الخيار الأفضل هو تعيين خاصية التجاوز إلى مخفية. يتم تطبيق هذه الخاصية أيضًا عند ضبط خاصية التجاوز على التمرير أو التلقائي. ولكن سوف تظهر أشرطة التمرير.
من خلال تحديد علامة الحذف، يمكن تحديد النص المخفي. عند حدوث التحديد، يتم إخفاء علامة القطع واستبدالها بالنص.
توفر هذه السمة طريقة فعالة لإجراء علامات الحذف في DHTML.
2. فاصل الكلمات
غالبًا ما يتم استخدام الخاصية الأكثر استخدامًا للتحكم في التفاف الأسطر مع التفاف الكلمات أدناه.
القواعد:
فاصل الكلمات: فاصل عادي، احتفظ بكل شيء
قيمة:
عادي: القيمة الافتراضية. السماح بفواصل الأسطر بين الكلمات
كسر الكل: هذا السلوك هو نفس السلوك الطبيعي للغات الآسيوية. يُسمح أيضًا بالفواصل داخل أي كلمة في سطر نص بلغة غير آسيوية. هذه القيمة مناسبة للنص الآسيوي الذي يحتوي على بعض النصوص غير الآسيوية
keep-all: نفس الوضع الطبيعي لجميع اللغات غير الآسيوية. بالنسبة للصينية والكورية واليابانية، لا يُسمح بفواصل الكلمات. مناسب للنص غير الآسيوي الذي يحتوي على كمية صغيرة من النص الآسيوي
يوضح:
يقوم بتعيين أو استرداد سلوك التفاف الكلمات للنص داخل كائن. خاصة عند ظهور لغات متعددة.
بالنسبة للصينيين، ينبغي استخدام كسر كل شيء. [قص الصفحة]
3. التفاف الكلمات
إذا كانت صفحة الويب التي تصممها غير قابلة للتكيف في العرض، فستحتاج إلى ضبطها على كلمة فاصلة، وإلا فقد تكون الصفحة متداخلة.
القواعد:
التفاف الكلمة: كلمة فاصلة عادية
قيمة:
عادي: القيمة الافتراضية. السماح للمحتوى بالامتداد إلى ما هو أبعد من حدود الحاوية المحددة
كلمة فاصلة: المحتوى سوف ينكسر داخل الحدود. إذا لزم الأمر، سيتم أيضًا فصل الكلمات
يوضح:
يقوم بتعيين أو استرداد ما إذا كان سيتم قطع السطر عندما يتجاوز السطر الحالي حدود الحاوية المحددة.
تعمل هذه الخاصية فقط على كائنات التخطيط، مثل كائنات الكتلة. لاستخدام هذه السمة للعناصر المضمنة، يجب عليك أولاً تعيين سمة الارتفاع أو العرض للكائن، أو تعيين سمة الموضع إلى مطلق، أو تعيين سمة العرض على الحظر.
4. تجاوز السعة، تجاوز السعة x، تجاوز السعة y
هذا لا يتحكم بشكل صارم في نمط التفاف الخط، ولكن تعيينه على مخفي يمكن أن يكمل عيوب التفاف الكلمات في أوقات معينة. على سبيل المثال، تريد عرض سطر واحد فقط من النص ضمن العرض المحدود، ولكن بطول هذا الخط من النص يتجاوز هذا العرض، جنبا إلى جنب مع مسافة بيضاء + تجاوز النص يمكن أن يحقق نتائج أفضل.
القواعد:
الفائض: التمرير المخفي التلقائي المرئي
قيمة:
مرئية: القيمة الافتراضية. لا يقطع المحتوى أو يضيف أشرطة التمرير. إذا تم الإعلان عن هذه القيمة الافتراضية بشكل صريح، فسيتم قص الكائن إلى أبعاد النافذة أو الإطار الذي يحتوي عليه. وسيكون إعداد سمة المقطع غير صالح
تلقائي: سيتم اقتصاص محتوى الكائن أو سيتم عرض أشرطة التمرير عند الضرورة
مخفي: لا تعرض محتوى يتجاوز حجم الكائن
التمرير: إظهار أشرطة التمرير دائمًا
يوضح:
استرداد أو تعيين كيفية إدارة محتوى الكائن عندما يتجاوز ارتفاعه وعرضه المحددين.
تكون القيمة الافتراضية لجميع الكائنات مرئية، باستثناء كائنات منطقة النص وكائنات النص، حيث تكون القيمة الافتراضية تلقائية. سيؤدي تعيين قيمة الخاصية هذه لكائن منطقة النص إلى مخفي إلى إخفاء أشرطة التمرير الخاصة به.
بالنسبة للجداول، إذا تم تعيين سمة تخطيط الجدول على ثابتة، فإن كائن td يدعم سمة التجاوز بقيمة افتراضية مخفية. إذا تم ضبطه على التمرير أو التلقائي، فسيتم قطع المحتوى الذي يتجاوز حجم td. إذا تم تعيينه على "مرئي"، فسيؤدي ذلك إلى تجاوز النص الإضافي إلى الخلايا الموجودة على اليمين أو اليسار (اعتمادًا على إعداد خاصية الاتجاه).
هذه الخاصية متاحة على منصات MAC بدءًا من IE5.
بدءًا من IE6، يمكن تطبيق هذه السمة على كائنات html عند تحديد وضع متوافق مع المعايير باستخدام إعلان !DOCTYPE.