آثار النصوص CSS

CSS تمرير النص، تغيير السطر، قواعد الطباعة والنمط الكتابة

في هذا الفصل، ستتعلم السمات التالية:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS تمرير النص

CSS text-overflow يحدد هذا السمة كيفية عرض المحتوى الزائد غير المرئي للمستخدم.

يمكن تقطيعها:

هذه بعض النصوص الطويلة التي لا يمكن احتواؤها داخل الصندوق. هذه بعض النصوص الطويلة التي لا يمكن احتواؤها داخل الصندوق

يمكن أيضًا تقديمها كنقاط استفهام (...):

هذه بعض النصوص الطويلة التي لا يمكن احتواؤها داخل الصندوق. هذه بعض النصوص الطويلة التي لا يمكن احتواؤها داخل الصندوق

كود CSS كما يلي:

مثال

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}
p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

جربها بنفسك

في المثال التالي، يتم عرض كيفية عرض المحتوى الزائد عند وضع المؤشر على العنصر:

مثال

div.test:hover {
  overflow: visible;
}

جربها بنفسك

CSS طباعة الكلمة (Word Wrapping)

CSS word-wrap السمة تجعل النص الطويل قابلاً للتقطيع ونسخه إلى السطر التالي.

إذا كان الكلمة طويلة جدًا ولا يمكن وضعها في منطقة واحدة، فإنها ستتوسع خارجها:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

من خلال استخدام سمة word-wrap، يمكنك إجبار النص على الطباعة - حتى إذا كان ذلك يعني قطع الكلمة في منتصفها:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

كود CSS كما يلي:

مثال

يُسمح بتقطيع الكلمات الطويلة ونسخها إلى السطر التالي:

p {
  word-wrap: break-word;
}

جربها بنفسك

قواعد الطباعة CSS

CSS word-break السمة تحدد قواعد الطباعة.

هذا الفقرة يحتوي على بعض النصوص. ستبدأ هذه الخط في نقاط الهمز.

This paragraph contains some text. This line will-break-at-hyphens.

هذا الفقرة يحتوي على بعض النصوص. ستبدأ الأسطر في أي حرف.

This paragraph contains some text. The lines will break at any character.

كود CSS كما يلي:

مثال

p.test1 {
  word-break: keep-all;
}
p.test2 {
  word-break: break-all;
}

جربها بنفسك

نمط الكتابة CSS

CSS writing-mode السمة تحدد ما إذا كانت سطر النص مكانة بشكل أفقي أو عمودي.

Some text with a span element with a vertical-rl writing-mode.

في المثال التالي، يتم عرض بعض أنماط الكتابة المختلفة:

مثال

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

جربها بنفسك

خصائص تأثير النص CSS

في الجدول أدناه تم قائمة خصائص تأثير النص CSS:

سمة الوصف
text-align-last تحديد كيفية ضبط التبرز للسطر الأخير من النص.
text-justify تحديد كيفية ضبط التبرز والتباعد للنص المساوى.
text-overflow تحديد كيفية عرض النص المبرمج الذي لا يتم عرضه.
word-break تحديد قواعد التحول إلى السطر التالي للخطوط غير الكينية.
word-wrap يسمح بتقطيع الكلمات الطويلة ونقلها إلى السطر التالي.
writing-mode تحديد ما إذا كان النص المحدد يوضع بشكل أفقي أم عمودي.