كيف تجعل الكلمات متقطعة في حالة لم تتسع المساحة

السلام عليكم و رحمة الله

أحيانا نحتاج من النص أن يضيف علامة '-' للكلمة بدلا أن يضعها في سطر جديد حتى لا تظهر مساحة بيضاء في نهاية الجملة، إن أردنا أن نضيفها في صفحة HTML فإنه يمكن ذلك بواسطة CSS، فقط يجب الإنتباه أن هذه الخاصية متاحة فقط لبعض اللغات الأجنبية مثل الإنجليزية.

 الكلمات المسطرة بالأحمر نرى النصف الأول في آخر السطر مع '-' و الجزء الآخر في بداية السطر، أما في الفقرة الثانية فهي نفس كلمات الفقرة الأولى لكن هذه المرة لأن الكلمات لم تجد الفراغ الكافي فإنها وضعت في أول سطر جديد.

إضافة خاصية تقطيع الكلمات إلى الصفحة:

 توفر CSS الأمر hyphen، نضيف هذا الأمر للوسوم مثل p و pre كالآتي:

p, pre {

  hyphens: none | manual | auto;

} 

none: يعني عدم إضافة '-' بل جعل الكلمة في سطر جديد إن لم يكن هناك مكان.

manual: إضافة '-' فقط عند الكلمات التي تريدها أن تكون متقطعة كأن تضيف ­ داخل 

كلمة sign­iferumque بهذا سيظهر تقطيع عند عدم وجود مساحة كافية.

auto: هنا سيقوم المتصفح تلقائيا بإضافة '-' عند الحاجة. 

بعض المتصفحات مثل Firefox 6، InternetExplorer 10، Safari 5.1 و ما فوق تدعم الخصائص

الثلاثة للhyphens أما Google chrome فإنه للأسف يدعم none فقط أي بدون تقطيع الكلمات.