افکت های متن درCSS 3 - خاصیت text-overflow

خاصیت text-overflow :

خاصیت text-overflow تعیین می کند هنگامی که مقدار متن درون یک عنصر ، از اندازه و ظرفیت عنصر در بر گیرنده آن بیشتر باشد ، چگونه نمایش داده شود .
در این حالت مرورگر باید تعیین کند که ادامه متن چگونه نمایش داده شود .
این خاصیت معمولا برای عناصری مثل تگ تگ < div > یا تگ < p > به کار می رود .
نکته مهم : برای استفاده از این خاصیت حتما بایستی مقدار خاصیت overflow عنصر را بر روی مقدار hidden و مقدار خاصیت white-space را برابر با nowrap قرار دهید .
شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax text-overflow : value ;
مثال : text-overflow : clip ;

در جدول زیر به تعریف و نحوه استفاده از پارامترهای این خاصیت می پردازیم :

syntax توضیح هر یک از موارد
توضیح پارامتر
تعیین این پارامتر اجباری است .
این پارامتر تعیین کننده نحوه نمایش ادامه متن در عنصری است که مقدار متن درون آن از اندازش بیشتر است و نمی تواند متن را به صورت کامل نمایش دهد .
این پارامتر می تواند یکی از 2 مقدار زیر را داشته باشد :
  1. clip : این مقدار باعث می شود تا مرورگر متن را به اندازه ای که می تواند نمایش داده و ادامه آن را بریده و نمایش ندهد .
  2. ellipsis : این مقدار باعث می شود تا مرورگر متن را به اندازه ای که می تواند نمایش داده و ادامه آن را به صورت نقطه چین ... نمایش دهد . استفاده از این حالت توصیه می شود ، زیرا به کاربر می فهماند که متن ، ادامه دارد .
value


پشتیانی در مرورگر های مختلف :

این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه text-overflow به بعد ، مرورگر فایرفاکس از نسخه 4 به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی می کنند .



مثال های عملی :

در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم .

مثال 1 : در مثال اول یک تگ < div > داریم که مقداری متن را در خود جای داده ، ولی اندازه متن از اندازه آن بزرگتر است . در این حالت مقدار خاصیت text-overflow را روی clip تعیین کرده ایم ، تا عنصر ادامه متن را که نمی تواند نمایش دهد ، قیچی نماید :

Example
< 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 تعیین کرده ایم ، تا عنصر ادامه متن را که نمی تواند نمایش دهد ، به صورت نقطه چین در آورد:

Example
< 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 !

خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟