متن در CSS3

10 / 10
از 1 کاربر

همانطور که به کرار گفته شد امروزه اکثر افراد در طراحی سایت از CSS3 بهره می گیرند. CSS3 شامل چندین ویژگی متن جدید است. در این فصل شما ویژگی های متن زیر را یاد خواهید گرفت:

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

این ویژگی بیانگر این است که زمانی که متن سر ریز کرد چه علامتی باید به کاربر نشان داده شود. این ویژگی می تواند خصوصیات زیر را به خود بگیرد:

clipدر واقع کوتاه شدن متن است

Ellipsisحذف شدن متن است

مثال:

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;
}

ویژگی word-wrap در CSS3

ویژگی word-wrap در CSS3 این امکان را در طراحی سایت فراهم می کند که کلمات طولانی شکسته شده و در خط بعدی قرار بگیرد.

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

p {
word-wrap: break-word;
}

ویژگی word-break در CSS3

این ویژگی معرف قوانین شکستن خط است. کدهای css آن به قرار زیر است :

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

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

در جدول زیر لیست ویژگی های جدید متن در CSS3 ارائه شده است.

 

ویژگی

 

خصوصیات

 

 

text-align-last

 

 

بیانگر چگونگی تنظیم چینش آخرین خط در یک متن است.

 

 

text-emphasis

 

در واقع کوتاه شده دو ویژگی text-emphasis-style و text-emphasis-color در یک اعلان است

 

 

text-justify

 

مشخص کننده چگونگی چینش و فاصله ها در متن است

 

 

text-overflow

 

بیانگر این است که متن در صورت سرریز شدن ( به اصطلاح overflowed ) چگونه به کاربر نمایش داده شود.

 

 

word-break

 

مشخص کننده قوانین شکستن خط برای اسکریپت های غیر CJK است.

 

 

word-wrap

 

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

 

ارسال نظر و نظرات ثبت شده