CSS3  چندین ویژگی جدید برای متن دارد. در این بخش شما با خصوصیات متن (text-overflow ،word-wrap ،word-break) آشنا خواهید شد
  • 1395/3/18 6/7/2016 4:35:36 PM 6/7/2016 4:35:36 PM
  • 0
  • 439

CSS3  چندین ویژگی جدید برای متن دارد.

در این بخش شما با خصوصیات متن زیر آشنا خواهید شد:

  • text-overflow
  • word-wrap
  • word-break

پشتیانی مرورگر

در جدول زیر اعداد نشان دهنده ی اولین نسخه ی مرورگری است که به طور کامل از خصوصیت پشتیبانی می کند. اعدادی که به همراه  -webkit-, -moz-, -o- آمده اند اولین نسخه ای از مرورگر را نشان می دهد که خصوصیت در صورت استفاده شدن با یک پیشوند توسط مرورگر پشتیبانی شده است.

 

Property

IE

Chrome

Firefox

Safari

Opera

text-overflow

6.0

4.0

7.0

3.1

11.0

9.0 –o-

word-wrap

5.5

23.0

3.5

6.1

12.1

word-break

 

5.5

4.0

15.0

3.1

15.0

 


سرریزی متن 

خصوصیت 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 {
    text-overflow: inherit;
    overflow: visible;
}

جاسازی جمله 

خصوصیت word-wrap به جملات طولانی این امکان را می دهد که شکسته شده و در خط بعدی قرار گیرد. اگر یک جمله به اندازه ای طولانی باشد که در داخل ناحیه جاسازی نشود، به بیرون گسترش پیدا می کند:

این پاراگراف یک کلمه طولانی دارد: این کلمممممممممممممممممممممهههههه  خیلی طولانی است. کلمه طولانی شکسته شده و در خط بعدی قرار می گیرد

خصوصیت word-wrap اجازه می دهد که شما متن را مجبور کنید که به طور یکنواخت حتی اگر از وسط کلمه شکسته شود در داخل ناحیه قرار بگیرد:

این پاراگراف یک کلمه طولانی دارد: این کلمممممممممممممممممممممهههههه  خیلی طولانی است. کلمه طولانی شکسته شده و در خط بعدی قرار می گیرد

کد css  به صورت زیر است


مثال

با این خصوصیت  جملات طولانی می توانند شکسته شده و در خط بعد قرار داده شوند:

{
    word-wrap: break-word;
}

شکست کلمه

خصوصیت word-break قوانین شکست خط را مشخص می کند.

این پاراگراف مقداری متن دارد. خط ها می تواند در هر کارکتری شکسته شوند

 

این پاراگراف مقداری متن دارد. خط ها می تواند در هر کارکتری شکسته شوند

 

کد css  به صورت زیر است
مثال

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

خصوصیات متن CSS3

در جدول زیر لیست خصوصیات متن CSS3  آورده شده است.

 

شرح

خصوصیت

تعییین می کند که خط آخر متن چطور ردیف شود

text-align-last

یک مختصر نویسی برای تعیین خصوصیات text-emphasis-style  و  text-emphasis-color در یک عبارت است

text-emphasis

تعیین می کند متن تراز شده چطور فاصله گذاری و ردیف شود.

text-justify

تعیین می کند که چگونه متن سرریز شده که نمایش داده نمی شود ، به کاربر علامت داده شود

text-overflow

قوانین شکست خط را برای اسکریپت ها non-CJK  تعیین می کند

word-break

به جملات طولانی این امکان را می دهد که شکسته شده و در خط بعدی قرار بگیرند

word-wrap

 

محمد انصاری

من به عنوان طراح و برنامه نویس در شرکت توسن در حوزه ی بانکداری فعالیت می کنم. بیشتر زمانم رو به مطالعه پیرامون طراحی نرم افزار اختصاص میدم. همچنین علاقه ی زیادی به فعالیت های ورزشی دارم و زمان کافی به ورزش اختصاص می دهم.

نظرات 0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربری ایجاد حساب کاربری
محمد انصاری
متن در CSS3
زیگماوب