این آموزش در تاریخ ۱۴۰۰/۱۱/۲۷ آپدیت شده است.
آموزش ویژگی word-break در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی word-break در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی word-break در CSS
با استفاده از ویژگی word-break در CSS میتوان نحوه شکسته شدن کلمات ( کلماتی که طولانی و بهم چسبیده هستن ) رو کنترل کرد.
خب در حالت عادی وقتی یک کلمه خیلی طولانی باشه و کلا هیچ فاصله ای بین حروف این کلمه وجود نداشته باشه ، مرورگر بصورت خودکار کُل اون کلمه رو میندازه سطر بعدی فقط برای اینکه مثلا خواناییش از دست نره ، ولی خب اینجوری معمولا متن از باکس اصلی یا حتی کلا از مرورگر بیرون میزنه و باعث میشه استایل متن / سایت خراب شه.
حال ما با استفاده از ویژگی word-break میتونیم مشخص و یا کنترل کنیم که این کلمات طولانی به چه شکل نمایش داده شوند، مثلا میتونیم بگیم کلمات شکسته نشوند و همه رو در یک سطر نشون بده و..
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی word-break را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از ۲ ویژگی 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-break در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | normal |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.wordBreak=”break-all”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی word-break در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| word-break | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
word-break: normal|break-all|keep-all|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی word-break در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| normal | مقدار پیش فرض – مرورگرها بطور خودکار خودشون مشخص میکنن |
| break-all | برای جلوگیری از سَرریز شدن متن، سعی میکنه تحت هر شرایطی همه کلمات و حروف رو بشکنه و به سطر جدید ببره |
| keep-all | همون مقدار normal هستش فقط روی زبان های ( چینی ، ژاپنی و کره ای ) عمل نمیکنه بروی بقیه زبان ها مثه همون مقدار normal عمل میکنه ( مثال ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- قبلا این ویژگی یه مقدار دیگه بنام break-word داشت ولی خب این مقدار منسوخ شده و نباید استفاده کرد، باید از ویژگی word-wrap که همین مقدار رو داره استفاده کرد.
- از مقدار keep-all نباید برای زبان های Chinese ( چینی ) ، Japanese ( ژاپنی ) و Korean ( کره ای ) استفاده نمایید چون نمیتونه سطر رو بشکنه و به جز این ۳ زبان، در بقیه حالت ها رفتارش شبیه به مقدار normal می شود.
