همانطور که به کرار گفته شد امروزه اکثر افراد در طراحی سایت از 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
|
این امکان را در طراحی سایت فراهم می کند تا کلمات طولانی شکسته و به خط بعدی منتقل شوند.
|