CSS

CSS Word Wrap
خاصية word-wrap في لغة CSS

سوف تتعلم في هذا الدرس إلتفاف النصوص في لغة CSS والتحكم ليلتف النص الي سطور جديدة أو لا يلتف النص إلي سطور جديدة ويبقي في سطر واحد.

التاريخ

30 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

789

المواضيع

24
الشروحات chevron_left CSS Word Wrap chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Word Wrap
خاصية word-wrap في لغة CSS

</> CSS word wrap
خاصية word-wrap في لغة CSS

تستخدم خاصية word-wrap في لغة CSS للتحكم في الكلمات الطويلة التي تخرج عن حدود العنصر تلتف إلي السطر التالي أو تظل في سطر واحد.


قيم خاصية word-wrap في لغة CSS:

  • normal هي القيمة الأفتراضية وهي أن الكلمات الطويلة تطفح خارج حدود العنصر ولا يتم كسرها.
  • break-word تسمح بتكسير الكلمات الغير قابلة للكسر وتلتف إلي السطر التالي.
CSS word-wrap Syntax

طريقة كتابة خاصية word-wrap في لغة CSS.

word-wrap:value;
CSS word-wrap Values

قيم خاصية word-wrap في لغة CSS.

word-wrap:normal|break-word|initial|inherit;

</> CSS word wrap normal
خاصية word-wrap مع القيمة normal في لغة CSS

تستخدم خاصية word-wrap في لغة CSS مع القيمة normal لتطفح  الكلمات الطويلة خارج حدود العنصر ولا يتم كسرها وهي القيمة الأفتراضية.

CSS word wrap normal

خاصية word-wrap في لغة CSS مع القيمة normal.

p
{
  word-wrap: normal;
  background-color:#2196F3;
  color:white;
  width:100px;
  padding:10px;
}

</> CSS word wrap break word
خاصية word-wrap مع القيمة break-word في لغة CSS

تستخدم خاصية word-wrap في لغة CSS مع القيمة break-word لتسمح بتكسير الكلمات الغير قابلة للكسر وتلتف إلي السطر التالي.

CSS word wrap break word

خاصية word-wrap في لغة CSS مع القيمة break-word.

p
{
  word-wrap:break-word;
  background-color:#2196F3;
  color:white;
  width:100px;
  padding:10px;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات