افکت های متن در CSS 3 - خاصیت word-wrap

خاصیت word-wrap :

خاصیت word-wrap در متون ، باعث می شود چنانچه یک کلمه طولانی بوده و به انتهای یک خط برسد ، به دو قسمت تبدیل شده و قسمت دوم آن به سطر بعدی نوشته منتقل شود .
به صورت پیش فرض ، چنانچه یک کلمه طولانی بوده و به انتهای یک خط برسد ، ادامه آن از شی در برگیرنده بیرون تر رفته و به سطر بعدی منتقل نمی شود .
از نظر من استفاده از این خاصیت می تواند یک مورد نادر باشد و عملا شاید کاربردی نداشته باشد . اما به هر حال در CSS 3 این امکان اضافه شده است .
شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax word-wrap : value ;
مثال : word-wrap : break-word ;

syntax توضیح هر یک از موارد
توضیح پارامتر
این پارامتر تعیین کننده نحوه عملکرد مرورگر در زمانی است ، که یک کلمه طولانی به انتهای سطر در نوشته رسیده و تعیین می کند آیا آن را به دو نیم کرده و ادامه را به سطر بعدی منتقل کند یا خیر .
این پارامتر می تواند یکی از 2 مقدار زیر را داشته باشد :
  1. normal : در این حالت ، چنانچه یک کلمه طولانی به انتهای یک سطر برسد ، مرور گر بدون هیچ گونه تغییری آن را نمایش داده و ممکن است از عنصر در برگیرنده خود نیز بیرون برود . در این حالت کلمه به دو نیم تقسیم نخواهد شد .
    این مقدار ، مقدار پیش فرض مرورگر است .
  2. break-word : در این حالت چنانچه یک کلمه طولانی به انتهای یک سطر برسد ، مرورگر آن را به دو قسمت تقسیم کرده و ادامه آن را به سطر بعدی نوشته منتقل می کند .
value


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

این خاصیت در تمام نسخه های جدید مرورگر های مطرح پشتیبانی می شود .

مثال عملی :

مثال 1 : در مثال زیر یک تگ پاراگراف < p > داریم که در یک از سطرهای آن یک کلمه طولانی وجود دارد . در 2 حالت مختلف ، استفاده و یا عدم استفاده از خاصیت 8 را در عمل به شما نمایش داده ایم . به خروجی ها و کدهای مثال دقت کنید :

Example
حالت 1 حالت 2  
< p style="width: 200px; border: solid 1px black; word-wrap: normal" >
    in developerstudio.ir we are trying to teach every thing you may need for web designe andsdfresfewrewfwerfwdcsdfghjkliuytrewqand programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added .
< /p >
< p style="width: 200px; border: solid 1px black; word-wrap: break-word " >
    in developerstudio.ir we are trying to teach every thing you may need for web designe andsdfresfewrewfwerfwdcsdfghjkliuytrewqand programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added .
< /p >
کد

in developerstudio.ir we are trying to teach every thing you may need for web designe andsdfresfewrewfwerfwdcsdfghjkliuytrewqand programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added .

in developerstudio.ir we are trying to teach every thing you may need for web designe andsdfresfewrewfwerfwdcsdfghjkliuytrewqand programming . some lanuages include asp.net , html , javascript and css is described in this site and new thigns every day is added .

خروجی


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


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

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

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