گروه مقاله : CSS3
تاريخ انتشار : 1394/03/04 - 13:10
كد :571
CSS3 شامل چندین خاصیت برای متن می باشد .
در این فصل شما با خاصیت های زیر برای متن آشنا می شوید:
-
text-overflow
-
word-wrap
-
word-break
پشتیبانی مرورگرها
|
خاصیت |
|
|
|
|
|
|
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
|
مرورگرهای Internet Explorer 10, Firefox, Chrome, Safari, Opera خاصیت های افکت متن را پشتیبانی می کنند.
نکته: Internet Explorer 9 و نسخه های قبلی آن، خصوصیت text-shadow را پشتیبانی نمی کنند.
خاصیت Text Overflow در CSS3
خاصیت text-overflow تعیین می کند هنگامی که مقدار متن درون یک عنصر ، از اندازه و ظرفیت عنصر در بر گیرنده آن بیشتر باشد ، چگونه نمایش داده شود .
در این حالت مرورگر باید تعیین کند که ادامه متن چگونه نمایش داده شود .
این خاصیت معمولا برای عناصری مثل تگ تگ < div > یا تگ < p > به کار می رود .
مثال :
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 Wrapping) در CSS3
وقتی یک نوشته از میزان تعیین شده برای آن بیشتر باشد از کادر بیرون می زند:
با استفاده خاصیت word-wrapping در CSS3 می توانید لغت بسیار بلند را مجبور کنید که کوتاه شود و به خط بعدی برود:
کد CSS استفاده شده به صورت زیر است:
اجازه می دهد تا کلمات بلند بتوانند شکسته شوند و ادامه آنها در خط بعدی قرار گیرد:
p {
word-wrap: break-word;
}
خاصیت word-break در CSS3
این خاصیت قوانین شکستن خطوط متن را مشخص می کند.
مثال :
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
خاصیت های متن در CSS3
|
خاصیت |
توضیحات |
|
text-align-last |
چگونگی هم تراز شدن خط آخر متن را مشخص می کند |
|
text-emphasis |
.علامت های تأکید و رنگ پیش زمینه آنها را در متن، مشخص می کند |
|
text-justify |
.روش هم تراز کردن متن را مشخص می کند |
|
text-overflow |
زمانی که متن، از اندازه عنصری که در آن قرار دارد، سرریز می کند، چه اتفاقی بیافتد |
|
word-break |
.قوانین شکستن خطوط متن را مشخص می کند |
|
word-wrap |
.اجازه می دهد لغات بسیار بلند، کوتاه شوند و به خط بعدی بروند |