عند التصميم، يكون لدى مشرفي المواقع سؤال بشكل دوري: كيف سيتم تغليف النص؟ في معظم الحالات، يتولى المتصفح هذه المهمة من تلقاء نفسه. لكن في بعض الأحيان يجب السيطرة على هذه العملية بشكل خاص كلمات طويلةوالعبارات التي إذا تم نقلها بشكل غير صحيح تفقد معناها.
خاصية التفاف الكلمات
في HTML، هناك علامة خاصة لفصل الأسطر.
. لكن استخدامه المتكرر يعتبر أمرًا سيئًا بين المطورين وغالبًا ما يشير إلى عدم الاحتراف. كدليل، تخيل أن لديك شعارًا وتريد أن يبدأ كل حرف بسطر جديد:
والنتيجة هي كود مرهق وقبيح، والذي سيتعرض منه أي مطور لصدمة ثقافية. وماذا لو كنت تريد أن يتم عرض الشعار أفقيًا على إصدار سطح المكتب، ولكن عموديًا إذا كان عرض الشاشة أقل من 550 بكسل؟ لذلك، استخدم دائمًا أوراق الأنماط المتتالية لتخصيص مظهر العناصر. خاصة مع الأدوات. التفاف CSSتتم الخيوط بطريقة أكثر أناقة. في الوقت نفسه، لا توجد علامات زائدة عن الحاجة، مما يقلل فقط من سرعة تحميل الصفحات.
الخاصية الأولى التي يجب النظر إليها عند معالجة النصوص هي التفاف الكلمات. يستغرق الأمر ثلاث قيم: عادي، وكسر الكل، والحفاظ على الكل. ما عليك سوى أن تتذكر كل شيء حتى تتمكن من العمل. العادي هو الإعداد الافتراضي ولا فائدة من تحديده. الاحتفاظ بكل الوسائل في وثيقة CSSحظر فواصل الأسطر. مصممة خصيصًا للشخصيات الصينية واليابانية والكورية. لذا، إذا كنت لا تريد التدوين بأي من هذه اللغات، فلن تحتاج إلى هذه الميزة. كما أنه غير معتمد. متصفح سفاريو الهواتف المحمولةعلى أساس دائرة الرقابة الداخلية.
لتعيين الشعار من المثال السابق مع باستخدام CSSعند النقل إلى سطر جديد من كل حرف، عليك كتابة الكود التالي:
P (الخط: عريض 30 بكسل Helvetica، sans-serif؛ العرض: 25 بكسل؛ التفاف الكلمات: Break-all؛)
يتم تحديد عرض الخط وحجمه بطريقة توفر مساحة كافية لحرف واحد فقط. يقوم التفاف الكلمات بقيمة فاصلة بإخبار المتصفح بالتفاف الكلمة في سطر جديد في كل مرة. لا يمكن تسمية هذه الخاصية بأنها لا يمكن الاستغناء عنها. ولكنها ستكون مفيدة عند تصميم كتل صغيرة تحتوي على نص، مثل حقول التعليقات.
خاصية المساحة البيضاء
أحد الأخطاء الشائعة التي يرتكبها مطورو الويب المبتدئون هو محاولة تحرير النص باستخدام مسافات أو الضغط على مفتاح Enter ثم التساؤل عن سبب عدم ظهور جهودهم على الصفحة. بغض النظر عن عدد المرات التي تضغط فيها على زر "Enter"، فسوف يتجاهله المتصفح. ولكن هناك طريقة لجعله يعرض النص بالطريقة التي تريدها، مع مراعاة جميع المسافات.
في مستند CSS، يمكن تكوين فواصل الأسطر، المخصصة بخاصية المسافة البيضاء، لاحترام المسافات أو الضغط على مفتاح Enter. ستؤدي المسافة البيضاء مع قيمة السطر المسبق إلى قيام المتصفح برؤية Enter في النص.
إذا قمت بتغيير السطر المسبق إلى التفاف مسبق في كود CSS الخاص بك، فسوف يتضمن التفاف السطر مسافات. وعلى العكس من ذلك، قم بتعطيل أي التفاف عن طريق تعيين خاصية المسافة البيضاء للنص بالقيمة nowrap:
#wrapper p (اللون: #FFF؛ الحشو: 10 بكسل؛ الخط: غامق 16 بكسل Helvetica، sans-serif؛ مسافة بيضاء: nowrap؛)
تجاوز النص
أداة أخرى مفيدة للعمل مع النص هي تجاوز النص. بالإضافة إلى التفاف الأسطر، تسمح خاصية CSS بقص المحتوى عندما تكون الحاوية ممتلئة. يأخذ قيمتين:
- مقطع - فقط يقطع النص؛
- علامة الحذف - تضيف علامة الحذف.
لكي تعمل الخاصية، يجب أيضًا تعيين العنصر لمنع فواصل الأسطر وتجاوز القيمة المخفية.
معلومات مختصرة
إصدارات CSS
المغلق 1 | سي اس اس 2 | سي اس اس 2.1 | سي اس اس 3 |
---|---|---|---|
وصف
تحدد خاصية المسافة البيضاء كيفية عرض المسافات بين الكلمات. في الظروف العاديةيتم عرض أي عدد من المسافات في كود HTML كمسافة واحدة على صفحة الويب. الاستثناء هو العلامة
يتم عرض النص الموجود في هذه الحاوية بجميع المسافات كما تم تنسيقها بواسطة المستخدم. لذا فإن المساحة البيضاء تحاكي كيفية عمل العلامةولكن على عكس ذلك، فإنه لا يغير الخط إلى مسافة أحادية.بناء الجملة
المساحة البيضاء: عادي | نوراب | قبل | ما قبل السطر | التفاف مسبق | يرث
قيم
عادي يتم عرض النص في نافذة المتصفح كالمعتاد، ويتم ضبط فواصل الأسطر تلقائيًا. يتم تجاهل مسافات nowrap، ويتم تجاهل فواصل الأسطر في تعليمات HTML البرمجية، ويتم عرض النص بالكامل على سطر واحد؛ ومع ذلك، إضافة العلامة
يلتف النص على سطر جديد. قبل يتم عرض النص بما في ذلك جميع المسافات والواصلات كما تمت إضافتها بواسطة المطور في كود HTML. إذا كان الخط طويلًا جدًا بحيث لا يمكن احتواؤه في نافذة المتصفح، فستتم إضافة شريط تمرير أفقي. لا يتم أخذ مسافات ما قبل الأسطر بعين الاعتبار في النص، ويتم التفاف النص تلقائيًا إلى السطر التالي إذا لم يكن مناسبًا للمنطقة المحددة. التفاف مسبق يتم الاحتفاظ بجميع المسافات والواصلات في النص، ولكن إذا كان عرض السطر لا يتناسب مع المنطقة المحددة، فسيتم التفاف النص تلقائيًا إلى السطر التالي. يرث يرث قيمة الوالد.يتم عرض تأثير القيم على النص في الجدول. 1.
HTML5 CSS2.1 IE Cr Op Sa Fx
مساحة بيضاء مثال
نظرية فيرما الأخيرة
X ن+ص ن=Z ن
حيث n عدد صحيح > 2
وتظهر نتيجة هذا المثال في الشكل. 1.
أرز. 1. تطبيق خاصية المسافة البيضاء
نموذج الكائن
document.getElementById("elementID").style.whiteSpace
المتصفحات
المتصفح متصفح الانترنتحتى الإصدار 7.0 لا يدعم قيم السطر المسبق والالتفاف المسبق والوراثة. ل
Opera الذي يسبق الإصدار 9.5 لا يدعم قيمة السطر المسبق. ل
لا يدعم Safari قبل الإصدار 3.0 وiOS قيم الالتفاف المسبق والأسطر المسبقة.
لا يدعم Firefox حتى الإصدار 2.0 ويتضمن قيم ما قبل السطر وما قبل الالتفاف. ل
تغذية الأسطر، وفاصل الأسطر، وفاصل الأسطر - الأمر كله يتعلق بشيء واحد. في لغة HTMLيتم استخدام فواصل الأسطر بشكل متكرر. هناك عدة طرق: استخدم العلامة
للترجمة إلى سطر جديد، أو يمكنك استخدام خصائص CSS لفصل السطر. فكر في مثال لاستخدام علامة فاصل الأسطر:في CSS، يمكن إجراء فواصل الأسطر بطرق مختلفة، مثل هذا:
ر (
تعويم: اليسار؛
العرض: 100%
الهامش: 0 0 20 بكسل 0؛ /* المساحة المتروكة بعد السطر 20 بكسل */
}سطر فاصل مع HTML أو CSS
في HTML، يعد إنشاء خط فاصل أمرًا سهلاً للغاية. يتم أيضًا استخدام علامة غير مقترنة
- هذا هو الخط الفاصل. يبدأ الخط الفاصل في سطر جديد ويتم وضع مسافة بادئة بعده. يمكنك التحكم في نمط الخط الأفقي، كما يمكنك عمل بديل له. فيما يلي مثال لخط فاصل باستخدام علامة:والآن دعونا نصمم (نغير الأنماط، نغير مظهر) الخط الفاصل لدينا:
ساعة(
العرض: 80% /* عرض الخط */
الارتفاع: 4 بكسل؛ /* ارتفاع / سمك الخط */
الخلفية: #333؛ /* الخلفية / لون الخط */
الحدود: 0؛ /* حد حول الخط الفاصل (قم بإزالته) */
الهامش: 5px0 5px0؛ /* المساحة المتروكة أعلى وأسفل السطر 5 بكسل */
}وقم بإنشاء بديل للخط الفاصل باستخدام العلامة
و CSS.الدرس 5
في هذا الدرس قمنا بما يلي:
1. تعلم كيفية الصنع كود أتش تي أم ألكان أكثر ملاءمة وسهلة القراءة بالنسبة لنا.
2. دعونا نتعرف على كيفية لف سطر النص بشكل صحيح.جعل كود HTML سهل الاستخدام.
أصبح الكود الخاص بنا الآن واضحًا وسهل القراءة، حيث أنه يحتوي على نص قليل ولا يحتوي على أي علامات تقريبًا. عندما نقوم بإنشاء صفحة أكثر تعقيدًا، سيكون هناك الكثير من العلامات، لذلك سيكون من الصعب العثور على العلامة الصحيحة.
لتجنب فوضى العلامات، تحتاج في البداية إلى ترتيب العلامات والسطور بحيث يسهل رؤيتها بصريًا. عندما يقرأ المتصفح المعلومات من صفحات HTMLفهو لا يهتم بعدد المسافات وعدد الأسطر الفارغة في الكود.
لقد قمت بتغيير النص الموجود في رمز الصفحة بالنسبة للنص الذي أنشأناه، لكن لا يهم. يظهر الشكلان الأيسر والأيمن نفس الرمز. سيتم عرض كلا الخيارين بواسطة المتصفح على شاشة المراقبة بنفس الطريقة تمامًا. أوافق، سيكون العمل مع الكود الموضح على اليمين أسهل بكثير من العمل مع الكود الموجود على اليسار.
الكود الذي نفكر فيه بسيط للغاية، ولكن حتى الآن الفرق في الإدراك البصري ملحوظ. لا توجد قواعد محددة لـ "استعادة النظام"، كل سيد يقرر بنفسه كيف يكون أكثر ملاءمة له للعمل.
فاصل الأسطر أتش تي أم أل. العلامة <br>.
انتبه إلى الرسم. في النسخة الأولى يكون النص مكتوبا في سطر واحد، وفي النسخة الثانية في سطرين.
سيعرض المتصفح كلا الخيارين بنفس الطريقة. سيتم كتابة النص في سطر واحد:
لماذا ذلك أنت تسأل؟ في الواقع، في أحد الرموز، يتم نقل جزء من النص إلى سطر آخر. سيكون من المنطقي إذا تم نقل جزء من النص في المتصفح أيضًا إلى سطر آخر، لكن HTML له منطقه الخاص في هذا الصدد. إذا قمنا بفاصل أسطر في كود html، فهذا يعادل مسافة واحدة بالنسبة للمتصفح(كيف مساحة عاديةبين الكلمات في النص). إذا قمنا بتحريك جزء من النص ليس سطرًا واحدًا لأسفل، بل 2 أو 3 (أي رقم)، فسيظل المتصفح يعتبر هذه المسافة مسافة عادية واحدة بين الكلمات وعند عرضها على الشاشة، سيتم كتابة النص في سطر واحد .
علامة <br>
وعندما تعرفنا على العلامات في الدرس الثالث ذكرت أن هناك علامات لا تحتاج إلى إغلاق. بطاقة شعار <br>واحد منهم، يعمل على كسر الخط.
دعونا نطبقها في الكود:لقد وضعنا علامة <br>في كود HTML الخاص بنا، والآن عند تشغيل الملف من خلال المتصفح، سيتم نقل جزء من النص إلى السطر التالي.
* لا تنس حفظ التغييرات في المفكرة (Ctrl + S) وتحديث الصفحة في المتصفح (F5).في كثير من الأحيان تكون هناك حاجة لإضافة فقرة جديدة، ولكن من دون سلسلة فارغة، والتي يتم إدراجها بواسطة علامة الفقرة
بالنسبة لبعض أجزاء النص، تكون الفواصل الزمنية القياسية المعتمدة للفقرات غير مناسبة. يمكن أن تكون هذه نقوشًا أسفل الصور وفي الجداول والقصائد والاقتباسات والحواشي والملاحظات.
بالنسبة لالتفاف الخط القسري، يتم توفير علامة خاصة، وظيفتها مضمنة في اسمها br (صف فاصل - "كسر صف، سطر"). بطاقة شعار
لغة النص التشعبي ترميز أتش تي أم أليعني أن كل المحتوى التالي يجب أن يبدأ في سطر جديد. إذا لزم الأمر، يمكنك وضع عدة علامات على التوالي لتحقيق التباعد المطلوب.بطاقة شعار
ليست حساسة لحالة الأحرف ولا تتطلب علامة إغلاق لأنها عنصر فارغ، ولكن من الأفضل الاعتياد على إغلاق جميع العلامات. في XHTML، يجب أن تكون علامة الفصل "مغلقة بإحكام" بشرطة مائلة عكسية.كسر العلامة سبيل المثال
العلامة br قيد التنفيذ< /title> <р>المشي في الخدمةр>
في أي مكان آخر وأبدا
لم أكن بهذا السوء
رؤساء الحشد الجشع
يقضمني على قيد الحياةр>
المشي في الخدمة
في أي مكان آخر وأبدا
لم أكن بهذا السوء.
رؤساء الحشد الجشع
يأكلني حيا.سمة العلامة
السمة الوحيدة التي علامة HTML
، يُطلق عليه اسم وهو يخبر المتصفح بما يجب فعله بالتفاف السطر إذا كان النص بحاجة إلى الالتفاف حول ما يسمى بالعنصر العائم، مثل صورة ذات سمة محاذاة تستخدم قيم اليمين/اليسار، أو كتلة في CSS تحتوي على خاصية تعويم.في مواصفات XHTML 1.0 / HTML 4.01، لا يمكن استخدام السمة الواضحة إلا مع Transitional وFramset ووإلا فلن يعمل الكود.
خصائص سمة العلامة
يعتمد تأثير تطبيق السمة الواضحة على قيمتها وموقع العنصر العائم. يمكن أن تأخذ السمة 4 قيم:
تمنع القيمة اليسرى التفاف العنصر المحاذي لليسار، وبالتالي "يتعثر" النص على العلامة
، سيتم وضعه أسفل الصورة أو أي عنصر عائم آخر.سيتم الحصول على نفس النتيجة تمامًا باستخدام الوسيطة all، والتي لن تسمح أبدًا باستخدام اليمين أو اليسار.
تمنع القيمة الصحيحة النص من الالتفاف حول عنصر محاذ إلى اليمين، أي بعد العلامة
لن يكون أمام النص خيار سوى الالتفاف حول الصورة، متدفقًا حولها إلى اليمين.القيمة لا شيء ("لا لك ولا لنا") تزيل كل السلطة من السمة الواضحة تمامًا، والعلامة
بصمت يلف الخط إلى أسفل.لا توجد قيمة افتراضية للسمة الواضحة للعلامة.
بطاقة شعار
هو نقل لينةتعد علامة فاصل الأسطر مفيدة جدًا لإنشاء التباعد الضروري بين الفقرات، حيث يتم استخدامها كفاصل بسيط، ولكن ليس كوسيلة لتقسيم النص إلى فقرات.
لا يجب أن تبالغ في استخدام علامة السطر الجديد لتنسيق النص، لأن النتائج ليست دائمًا أنيقة.
على سبيل المثال، إذا كنت تستخدم العلامة
لترجمة الأسطر داخل فقرة، قد يؤدي ذلك إلى ظهور "مشط" في نافذة المستخدم إذا كان أصغر من النافذة التي كان مشرف الموقع يستهدفها.