تأثيرات نص CSS
تجاوز نص CSS وتغليف الكلمات وقواعد فصل الأسطر وأنماط الكتابة
ستتعرف في هذا الفصل على الخصائص التالية:
text-overflowword-wrapword-breakwriting-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
تتيح خاصية CSS word-wrapإمكانية كسر الكلمات الطويلة والالتفاف على السطر التالي.
إذا كانت الكلمة طويلة جدًا بحيث لا يمكن احتواؤها داخل منطقة ، فإنها تتسع للخارج:
تحتوي هذه الفقرة على كلمة طويلة جدًا: thisisaveryveryveryveryverylongword. ستكسر الكلمة الطويلة وتلتف إلى السطر التالي.
تتيح لك خاصية التفاف النص إجبار النص على الالتفاف - حتى لو كان ذلك يعني تقسيمه في منتصف الكلمة:
تحتوي هذه الفقرة على كلمة طويلة جدًا: thisisaveryveryveryveryverylongword. ستكسر الكلمة الطويلة وتلتف إلى السطر التالي.
كود CSS هو كما يلي:
مثال
اسمح للكلمات الطويلة أن يتم كسرها والالتفاف على السطر التالي:
p {
word-wrap: break-word;
}
كسر كلمة CSS
word-breakتحدد خاصية CSS قواعد فصل الأسطر.
تحتوي هذه الفقرة على بعض النص. هذا السطر سوف يكسر عند واصلات.
تحتوي هذه الفقرة على بعض النص. سوف تتكسر الأسطر عند أي حرف.
كود CSS هو كما يلي:
مثال
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
وضع الكتابة CSS
تحدد خاصية CSS writing-modeما إذا كانت سطور النص موضوعة أفقيًا أو رأسيًا.
بعض النصوص التي تحتوي على عنصر امتداد بامتداد عمودي rl وضع الكتابة.
يوضح المثال التالي بعض أوضاع الكتابة المختلفة:
مثال
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
خصائص تأثير نص CSS
يسرد الجدول التالي خصائص تأثير نص CSS:
| Property | Description |
|---|---|
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |