القائمة الرئيسية

الصفحات

CSS

خاصية white-space وخاصية word-wrap فى CSS

css
(0)

 خاصية white-space و word-wrap 

معنى White Space المسافه البيضاء أى المسافه بين الحروف عندما تضغط مسطرة أثناء الكتابة .
معنى Word wrap هى خاصية تسمح بشد الكلمة لأسفل عند الوصول لأقصى عرض للعنصر .

خاصية white-space وword-wrap

CSS white-space Property:

 خاصية المساحة البيضاء :

تُستخدم خاصية المساحة البيضاء في CSS للتحكم في اجتزاء النص والتباعد ، وهناك عدة أنواع من القيم في هذه الخاصية لاستخدامها.


التركيب :


white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;


normal: القيمة الافتراضية. يتم طي المسافات البيضاء المتعددة في واحدة. يلتف النص إلى السطر التالي عند الحاجة.


nowrap: يتم طي المسافات البيضاء المتعددة في واحدة ، لكن النص لا يلتف إلى السطر التالي. لقد ناقشنا بالفعل كيفية إستخدام قيمة nowrap لمنع فواصل الأسطر.


pre: نفس النتائج مثل إستخدام <pre> حيث سيتم الإحتفاظ بجميع المسافات البيضاء كما هي والنص يلتف فقط عندما تكون فواصل الأسطر في المحتوى.


pre-line: يتم طي المسافات البيضاء المتعددة في واحدة ، وينقسم النص إلى السطر التالي عند الحاجة أو مع فواصل الأسطر في المحتوى.


pre-wrap: مشابه لما قبل ، لكن النص يلتف أيضًا عند الحاجة.


قيم الخاصية:


عادي: هذه هي القيمة الافتراضية لهذه الخاصية. عند تعيين خاصية المسافة  في CSS على الوضع الطبيعي ، ستظهر كل سلسلة مكونة من مسافتين أو أكثر كمسافة واحدة. سيتم التفاف المحتوى الموجود في العنصر عند الضرورة.

بناء الجملة:

white-space : normal;

 

CSS word-wrap Property:


تتيح خاصية إجتزاء النص إمكانية كسر الكلمات الطويلة والإجتزاء على النحو التالي

Default value:normal
Inherited:yes
Animatable:no.
Version:CSS3
JavaScript syntax:object.style.wordWrap="break-word"
body {
  padding: 20px;
  font-size: 20px;
}

p {
  margin: 0 auto;
  max-width: 150px;
  border: solid 2px #ccc;
  padding: 12px;
}

button {
  display: block;
  margin: 20px auto;
}

#Overflow {
  overflow-wrap: break-word;
  hyphens: auto;
}

 

<html>
 <head>
 </head>
 <body>
   <p>An unusually long word:HAHAAHAHAAH</p>
   <p id="Overflow">An unusually long word: HAHAAHAHAHAHAHAAHAHAHAAHAHAH</p>
 </body>
</html>

CSS word-wrap Property


الدروس التالية : 













أخر المواضيع من قسم : CSS

تعليقات

إرسال تعليق