في العديد من اللغات المكتوبة، يمكن تقسيم الأسطر بين المقاطع وكذلك بين الكلمات. ويتم ذلك غالبًا بحيث يمكن وضع المزيد من الأحرف على سطر من النص بهدف إزالة عدد أقل من الأسطر في منطقة النص، وبالتالي توفير مساحة. وفي هذه اللغات، تتم الإشارة إلى الفاصل بشكل مرئي باستخدام واصلة (('-').
تحدّد المستوى 3 لوحدة CSS النصية خاصية الواصلات للتحكم في وقت عرض الشُرط للمستخدمين وسلوكهم عند عرضها. ينفِّذ Chrome خاصية الشُرط بدءًا من الإصدار 55.
وفقًا للمواصفات، تتضمّن سمة الواصلات ثلاث قيم: none وmanual وauto. لتوضيح ذلك، نحتاج إلى استخدام واصلة ناعمة (­) كما في المثال التالي.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
الواصلة اللينة هي الواصلة التي لن تظهر إلا عند حدوثها في الهامش الأخير. تعتمد طريقة عرض هذه الواصلة في الإصدار 55 من Chrome أو الإصدارات الأحدث على قيمة سمة hypens في CSS.
-webkit-hyphens: manual;
hyphens: manual;
الجمع بين هذه ينتج عن ذلك نتيجة على النحو التالي:
لاحظ أن الواصلة الناعمة غير مرئية. في جميع الحالات، عندما تتناسب كلمة تحتوي على واصلة رقيقة مع سطر واحد، ستكون الواصلة غير مرئية. الآن، لنلقي نظرة على كيفية عمل القيم الثلاث للواصلة.
بدون استخدام
في المثال الأول، تم ضبط سمة الشُرط على none. يمنع ذلك عرض
الواصلة اللينة. يمكنك تأكيد ذلك من خلال ضبط حجم النافذة
بحيث لا تظهر كلمة "elit" في سطر النص المرئي.
الاستخدام اليدوي
في المثال الثاني، يتم ضبط سمة الواصلات على manual، ما يعني أنّ الواصلة
اللينة لن تظهر إلا عندما يقسّم الهامش كلمة "elit". مرة أخرى، يمكنك تأكيد ذلك
عن طريق ضبط حجم النافذة.
استخدام تلقائي
في المثال الثالث، تم ضبط سمة الشُرط على auto. في هذه الحالة، لن تكون هناك حاجة إلى واصلة ناعمة
لأن وكيل المستخدم سيحدد مواقع الواصلات تلقائيًا. إذا غيّرت حجم النافذة، سترى أنّ المتصفّح يواصل هذا المثال في المكان نفسه الموجود في المكان الثاني، على الرغم من عدم استخدام واصلة ناعمة. إذا تابعت تصغير النافذة، سترى أنّ المتصفّح يستطيع
تقسيم الأسطر بين أي مقطعَين في النص.