افکت های متن در CSS 3 - خاصیت word-wrap
خاصیت word-wrap :
خاصیت word-wrap در متون ، باعث می شود چنانچه یک کلمه طولانی بوده و به انتهای یک
خط برسد ، به دو قسمت تبدیل شده و قسمت دوم آن به سطر بعدی نوشته منتقل شود .
به صورت پیش فرض ، چنانچه یک کلمه طولانی بوده و به انتهای یک خط برسد ، ادامه آن از
شی در برگیرنده بیرون تر رفته و به سطر بعدی منتقل نمی شود .
از نظر من استفاده از این خاصیت می تواند یک مورد نادر باشد و عملا شاید کاربردی نداشته
باشد . اما به هر حال در CSS 3 این امکان اضافه شده است .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
word-wrap : value ;
مثال : word-wrap : break-word ;
|
|
توضیح
|
این پارامتر تعیین کننده نحوه عملکرد مرورگر در زمانی است ، که یک کلمه طولانی به انتهای
سطر در نوشته رسیده و تعیین می کند آیا آن را به دو نیم کرده و ادامه را به سطر بعدی
منتقل کند یا خیر .
این پارامتر می تواند یکی از 2 مقدار زیر را داشته باشد :
- normal : در این حالت ، چنانچه یک کلمه طولانی به انتهای یک
سطر برسد ، مرور گر بدون هیچ گونه تغییری آن را نمایش داده و ممکن است از عنصر در برگیرنده
خود نیز بیرون برود . در این حالت کلمه به دو نیم تقسیم نخواهد شد .
این مقدار ، مقدار پیش فرض مرورگر است .
- break-word : در این حالت چنانچه یک کلمه طولانی به انتهای
یک سطر برسد ، مرورگر آن را به دو قسمت تقسیم کرده و ادامه آن را به سطر بعدی نوشته
منتقل می کند .
|
پشتیانی در مرورگر های مختلف :
این خاصیت در تمام نسخه های جدید مرورگر های مطرح پشتیبانی می شود .
مثال عملی :
مثال 1 : در مثال زیر یک تگ پاراگراف < p > داریم که
در یک از سطرهای آن یک کلمه طولانی وجود دارد . در 2 حالت مختلف ، استفاده و یا عدم
استفاده از خاصیت 8 را در عمل به شما نمایش داده ایم . به خروجی ها و کدهای مثال دقت
کنید :
|
حالت 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 .
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :