افکت های متن درCSS 3 - خاصیت text-overflow
خاصیت text-overflow :
خاصیت text-overflow تعیین می کند هنگامی که مقدار متن درون یک عنصر ، از اندازه و
ظرفیت عنصر در بر گیرنده آن بیشتر باشد ، چگونه نمایش داده شود .
در این حالت مرورگر باید تعیین کند که ادامه متن چگونه نمایش داده شود .
این خاصیت معمولا برای عناصری مثل تگ
تگ < div > یا
تگ < p > به کار می رود .
نکته مهم : برای استفاده از این خاصیت حتما بایستی مقدار خاصیت
overflow عنصر را بر روی مقدار hidden و مقدار خاصیت white-space را برابر با nowrap
قرار دهید .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
text-overflow : value ;
مثال : text-overflow : clip ;
|
در جدول زیر به تعریف و نحوه استفاده از پارامترهای این خاصیت می پردازیم :
|
توضیح
|
تعیین این پارامتر اجباری است .
این پارامتر تعیین کننده نحوه نمایش ادامه متن در عنصری است که مقدار متن درون آن از
اندازش بیشتر است و نمی تواند متن را به صورت کامل نمایش دهد .
این پارامتر می تواند یکی از 2 مقدار زیر را داشته باشد :
- clip : این مقدار باعث می شود تا مرورگر متن را به اندازه ای
که می تواند نمایش داده و ادامه آن را بریده و نمایش ندهد .
- ellipsis : این مقدار باعث می شود تا مرورگر متن را به اندازه
ای که می تواند نمایش داده و ادامه آن را به صورت نقطه چین ... نمایش دهد . استفاده
از این حالت توصیه می شود ، زیرا به کاربر می فهماند که متن ، ادامه دارد .
|
پشتیانی در مرورگر های مختلف :
این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه text-overflow
به بعد ، مرورگر فایرفاکس از نسخه 4 به بعد و مرورگر های کروم و اپرا نیز از این خاصیت
پشتیبانی می کنند .
مثال های عملی :
در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم
.
مثال 1 : در مثال اول یک تگ < div > داریم که مقداری
متن را در خود جای داده ، ولی اندازه متن از اندازه آن بزرگتر است . در این حالت مقدار
خاصیت text-overflow را روی clip تعیین کرده ایم ، تا عنصر ادامه متن را که نمی تواند
نمایش دهد ، قیچی نماید :
< div style=" text-overflow: clip
; overflow : hidden ; width: 200px ; height: 100px ; border: solid 1px black
; background-color : Blue" >
CSS 3 has very intelligent tools for web developers .
some work
that was a thrick before it that CSS 3 comes , now can be done just
with a simple code !
< /div >
|
CSS 3 has very intelligent tools for web developers . some work that
was a thrick before it that CSS 3 comes , now can be done just with a simple code
!
|
مثال 2 : در مثال دوم نیز یک تگ < div > داریم که مقداری
متن را در خود جای داده ، ولی اندازه متن از اندازه آن بزرگتر است . در این حالت مقدار
خاصیت text-overflow را روی eliopissis تعیین کرده ایم ، تا عنصر ادامه متن را که نمی
تواند نمایش دهد ، به صورت نقطه چین در آورد:
< div style=" text-overflow: ellipsis
; overflow : hidden ; white-space : nowrap ; width: 200px ; height: 100px
; border: solid 1px black ; background-color : Blue" >
CSS 3 has very intelligent tools for web developers .
some work
that was a thrick before it that CSS 3 comes , now can be done just
with a simple code !
< /div >
|
CSS 3 has very intelligent tools for web developers . some work that
was a thrick before it that CSS 3 comes , now can be done just with a simple code
!
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :