این آموزش در تاریخ ۱۴۰۰/۱۱/۲۷ آپدیت شده است.
آموزش ویژگی word-wrap در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی word-wrap در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی word-wrap در CSS
ویژگی word-wrap در CSS در واقع همان ویژگی Overflow-Wrap می باشد ، یعنی در واقع این ۲ ویژگی یکی هستند و فقط نامشون جایگزین همدیگه شده ، با استفاده از این ویژگی ها میتوان کاری کرد که کلمات طولانی و بهم چسبیده شکسته شوند و به سطر بعدی بروند.
خب در حالت عادی وقتی یک کلمه خیلی طولانی باشه و کلا هیچ فاصله ای بین حروف این کلمه وجود نداشته باشه ، مرورگر بصورت خودکار کُل اون کلمه رو میندازه سطر بعدی فقط برای اینکه مثلا خواناییش از دست نره ، ولی خب اینجوری معمولا متن از باکس اصلی یا حتی کلا از مرورگر بیرون میزنه و باعث میشه استایل متن / سایت خراب شه.
این ویژگی شبیه ویژگی word-break هستش فقط تفاوتشون در عمل کردن بروی زبان های شرق آسیا مثه چینی ، ژاپنی و کُره ای می باشد.
کمی قبلتر نام این ویژگی همان word-wrap بود ولی با نام overflow-wrap جایگزین شد و الان دیگه معمولا با نام overflow-wrap شناخته میشه، پس در کل بدونید word-warp و overflow-warp یکی هستند.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی word-wrap را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از فقط ویژگی word-wrap
|
1 2 3 4 5 6 7 |
.normal{ word-wrap: normal; } .break-word{ word-wrap: break-word; } |
مثال شماره ۲ : استفاده از ۲ ویژگی word-break و word-wrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.normal{ word-break: normal; } .breakAll{ word-break: break-all; } .keepAll{ word-break: keep-all; } .breakWord{ word-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 | Edge |
| word-wrap | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 2 3 |
word-wrap: normal|break-word|initial|inherit; یا 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 بروی زبان های چینی ، ژاپنی و کره ای می باشد. ( مثال )
