آموزش ویژگی word-wrap در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی word-wrap در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی word-wrap در CSS
با استفاده از ویژگی word-wrap در CSS که در واقع همان ویژگی Overflow-Wrap می باشد ، یعنی در واقع این ۲ ویژگی یکی هستند و فقط نامشون جایگزین همدیگه شده ، با استفاده از این ویژگی ها میتوان کاری کرد که کلمات طولانی و بهم چسبیده شکسته شوند و به سطر بعدی بروند.
خب در حالت عادی وقتی یک کلمه خیلی طولانی باشه و کلا هیچ فاصله ای بین حروف این کلمه وجود نداشته باشه ، مرورگر بصورت خودکار کل اون کلمه رو میندازه سطر بعدی فقط برای اینکه مثلا خواناییش از دست نره ، ولی خب اینجوری معمولا متن از باکس اصلی یا حتی کلا از مرورگر بیرون میزنه و باعث میشه استایل متن خراب شه.
این ویژگی خیلی شبیه ویژگی word-break عمل میکند، میتوانید آموزش ویژگی word-break را مشاهده نمایید.
کمی قبلتر نام این ویژگی همان word-wrap بود ولی با نام overflow-wrap جایگزین شد و الان دیگه معمولا با نام overflow-wrap شناخته میشه، پس در کل بدونید word-warp و overflow-warp یکی هستند.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی word-wrap را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 |
.break-word{ word-wrap: break-word; } .overflow-wrap{ overflow-wrap: break-word; } |
Free-Learn
جدول مشخصات ویژگی word-wrap در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | normal |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.wordWrap=”break-word”; یا object.style.overflowWrap=”break-word”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی word-wrap در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| word-wrap | ۴٫۰ | ۳٫۵ | ۱۱٫۵ | ۳٫۱ | ۶٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
word-wrap: normal|break-word|initial|inherit; |
یا
|
1 |
overflow-wrap: normal|break-word|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی word-wrap در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| normal | پیش فرض – مرورگرها بصورت خودکار کلمات طولانی را میشکنند و به سطر بعد منتقل میکنند |
| break-word | سعی میکند تحت هرشرایطی کلمات طولانی را شکسته و به سطر بعدی ببرید تا از خراب شدن استایل متن جلوگیری کند |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- ویژگی word-wrap همان overflow-wrap می باشد و یکی می باشند، فقط word-wrap قبلا مورد استفاده قرار میگرفته و overflow-wrap الان جایگزین این نام شده.
- عملکرد ویژگی های word-wrap و word-break شبیه بهمدیگه می باشند و تنها نقطه تفاوتشون در اثرگذاری ویژگی word-break بروی زبان های چینی ، ژاپنی و کره ای می باشد.
