أحدث البرامج التعليمية وتطوير الشبكة
×

CSS البرنامج التعليمي

CSS الصفحة الرئيسية CSS المقدمة CSS بناء الجملة CSS كيف CSS الألوان CSS خلفيات CSS حدود CSS هوامش CSS حشوة CSS عرض ارتفاع CSS نص CSS الخطوط CSS الروابط CSS قوائم CSS الجداول CSS صندوق نموذج CSS المخطط CSS العرض CSS العرض الاقصى CSS الوظيفة CSS تطفو CSS Inline-block CSS محاذاة CSS Combinators CSS الفئة المزيفة CSS شبه عنصر CSS شريط التنقل CSS القوائم المنسدلة CSS تلميحات CSS معرض الصور CSS صورة التعتيم CSS العفاريت صورة CSS ATTR المختارون أشكال CSS CSS عدادات

CSS3

CSS3 المقدمة CSS3 زوايا مدورة CSS3 صور الحدود CSS3 خلفيات CSS3 الألوان CSS3 التدرجات CSS3 ظلال CSS3 نص CSS3 الخطوط CSS3 2D التحويلات CSS3 التحويلات 3D CSS3 التحولات CSS3 الرسوم المتحركة CSS3 صور CSS3 أزرار CSS3 ترقيم الصفحات CSS3 أعمدة متعددة CSS3 واجهة المستخدم CSS3 مربع تحجيم CSS3 Flexbox CSS3 تساؤلات الإعلام CSS3 أمثلة MQ

CSS تصميم ويب مستجيب

تصميم ويب مستجيب مقدمة تصميم ويب مستجيب العرض تصميم ويب مستجيب شبكة عرض تصميم ويب مستجيب تساؤلات الإعلام تصميم ويب مستجيب صور تصميم ويب مستجيب فيديوهات تصميم ويب مستجيب الأطر

CSS Examples

CSS أمثلة CSS اختبار قصير CSS شهادة

CSS References

CSS مرجع CSS محددات CSS وظائف CSS إشارة أورال CSS Web Safe الخطوط CSS Animatable CSS وحدات CSS PX-EM محول CSS الألوان CSS قيم اللون CSS أسماء الألوان CSS3 دعم المتصفح

 

CSS نص


نص 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;
}
انها محاولة لنفسك »

يظهر المثال التالي كيف يمكنك عرض محتوى فاضت عندما تحوم فوق العنصر:

مثال

div.test:hover {
    text-overflow: inherit;
    overflow: visible;
}
انها محاولة لنفسك »

CSS3 كلمة تغليف

وCSS3 word-wrap تسمح المنشأة الكلمات الطويلة لتكون قادرة على أن تكون مكسورة والتفاف على السطر التالي.

وإذا كانت الكلمة طويلة جدا لتناسب داخل المنطقة، وأنها توسع خارج:

تحتوي هذه الفقرة كلمة طويلة جدا: thisisaveryveryveryveryveryverylongword . إن كلمة طويلة كسر والتفاف إلى السطر التالي.

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

تحتوي هذه الفقرة كلمة طويلة جدا: thisisaveryveryveryveryveryverylongword . إن كلمة طويلة كسر والتفاف إلى السطر التالي.

رمز المغلق هو على النحو التالي:

مثال

السماح الكلمات الطويلة لتكون قادرة على أن تكون مكسورة والتفاف على السطر التالي:

p {
    word-wrap: break-word;
}
انها محاولة لنفسك »

CSS3 كلمة يكسر

وCSS3 word-break تحدد الخاصية خط كسر القواعد.

تحتوي هذه الفقرة بعض النصوص. هذا الخط سوف-كسر-في-الواصلات.

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

رمز المغلق هو على النحو التالي:

مثال

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

p.test2 {
    word-break: break-all;
}
انها محاولة لنفسك »

اختبر نفسك مع تمارين!

التمرين 1 » التمرين 2» التمرين 3 »


خصائص النص CSS3

يسرد الجدول التالي خصائص النص CSS3 الجديدة:

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