نص CSS3
CSS3 يحتوي على العديد من الميزات نص جديد.
في هذا الفصل سوف تتعلم حول خصائص النص التالي:
-
text-overflow -
word-wrap -
word-break
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -o- تحدد النسخة الأولى التي عملت مع بادئة.
| الملكية | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 تجاوز النص
وCSS3 text-overflow الخاصية تحديد كيفية محتوى فاضت أنه لا يتم عرض يجب أن أشار إلى المستخدم.
ويمكن أن يثقب:
هذه هي بعض النص الطويل الذي لن تجد لها مكانا في المربع
أو أنها يمكن أن تقدم على أنها علامة القطع (...):
هذه هي بعض النص الطويل الذي لن تجد لها مكانا في المربع
رمز المغلق هو على النحو التالي:
مثال
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;
} انها محاولة لنفسك » يظهر المثال التالي كيف يمكنك عرض محتوى فاضت عندما تحوم فوق العنصر:
CSS3 كلمة تغليف
وCSS3 word-wrap تسمح المنشأة الكلمات الطويلة لتكون قادرة على أن تكون مكسورة والتفاف على السطر التالي.
وإذا كانت الكلمة طويلة جدا لتناسب داخل المنطقة، وأنها توسع خارج:
تحتوي هذه الفقرة كلمة طويلة جدا: thisisaveryveryveryveryveryverylongword . إن كلمة طويلة كسر والتفاف إلى السطر التالي.
الخاصية التفاف يسمح لك لإجبار النص إلى التفاف - حتى لو كان ذلك يعني تقسيم في وسط الكلمة:
تحتوي هذه الفقرة كلمة طويلة جدا: thisisaveryveryveryveryveryverylongword . إن كلمة طويلة كسر والتفاف إلى السطر التالي.
رمز المغلق هو على النحو التالي:
مثال
السماح الكلمات الطويلة لتكون قادرة على أن تكون مكسورة والتفاف على السطر التالي:
p {
word-wrap: break-word;
}
انها محاولة لنفسك » CSS3 كلمة يكسر
وCSS3 word-break تحدد الخاصية خط كسر القواعد.
تحتوي هذه الفقرة بعض النصوص. هذا الخط سوف-كسر-في-الواصلات.
تحتوي هذه الفقرة بعض النصوص. فإن خطوط كسر في أي حرف.
رمز المغلق هو على النحو التالي:
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 »
خصائص النص CSS3
يسرد الجدول التالي خصائص النص CSS3 الجديدة:
| الملكية | وصف |
|---|---|
| text-align-last | يحدد كيفية محاذاة السطر الأخير من النص |
| text-emphasis | والاختزال لوضع على غرار التركيز النص والنص التركيز الألوان في إعلان واحد |
| text-justify | تحدد كيفية النص مبررة يجب أن تتماشى ومتباعدة |
| text-overflow | يحدد محتوى كيف فاضت أنه لا يتم عرض يجب أن أشار إلى المستخدم |
| word-break | يحدد خط قواعد كسر للمخطوطات غير كجك، |
| word-wrap | يسمح الكلمات الطويلة لتكون قادرة على أن تكون مكسورة والتفاف على السطر التالي |