أثر النص في 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;
{}

جرب بنفسك

تدوير النص (Word Wrapping) CSS

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 تحديد قواعد الطباعة للخطوط غير CJK.
word-wrap يسمح بقطع الكلمات الطويلة وتحويلها إلى السطر التالي.
writing-mode تحديد ما إذا كان النص المحدد يوضع بشكل أفقي أم عمودي.