این آموزش در تاریخ ۱۴۰۰/۱۱/۰۵ آپدیت شده است.
آموزش ویژگی hyphens در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی hyphens در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی hyphens در CSS
با استفاده از ویژگی hyphens [ در لغت یعنی خط ربط یا خط پیوند ] در CSS میتوان با استفاده از خط ربط ( – ) نحوه شکسته شدن متن / کلمات طولانی را به سطرهای بعدی کنترل کرد.
بطور کلی کارش اینه که وقتی یه کلمه طولانی شکسته میشود و به سطر جدید میرود، یه خط ربط ( – ) بین اون تکه های شکسته شده ایجاد میکند، که مشخص باشه مثلا این کلمه شکسته شده و به سطر جدید رفته.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی hyphens را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : حالت خودکار ( یعنی خودش خودکار هرجا نیاز بود کلمات رو میشکنه و – اضافه میکنه )
|
1 2 3 4 5 |
article p{ padding: 5px; -webkit-hyphens: auto; hyphens: auto; } |
مثال شماره ۲ : حالت دستی ( خودمون بصورت دستی داخل متن مون از موجودیت ;hyphen& استفاده کردیم )
|
1 2 3 |
<article lang="en"> <p>For example, if you are desi‐gning a brand new web‐site ........ </article> |
Free-Learn
جدول مشخصات ویژگی hyphens در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | manual |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.hyphens=”auto”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی hyphens در CSS پشتیبانی میکنند یا خیر.
» عددی که در کنار -webkit- وجود دارد ، یعنی از آن نسخه به بالا باید از پیشوند -webkit- استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| hyphens | ۸۸ | ۴۳ | ** | ۵٫۱ به بالا -webkit- | ** |
** فقط در نسخه گوشی های موبایل و سیستم عامل Mac بصورت جزئی پشتیبانی میشود
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
hyphens: none|manual|auto|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی hyphens در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| none | هیچ خط ربطی ایجاد نمی شود |
| manual | مقدار پیش فرض – در جایی که از کلمه کلیدی ;hyphen& یا ;shy& بصورت دستی استفاده شده باشد خط ربط ایجاد میشود |
| auto | بصورت خودکار و در صورت نیاز خط ربط ایجاد میشود |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- این ویژگی تنها در صورتی عمل خواهد کرد که زبان یک عنصر ( مثه مثال شماره ۱ در تگ article ) توسط صفت lang مشخص شده باشد در غیراینصورت عمل نخواهد کرد.
- و هر زبانی رو هم این ویژگی پشتیبانی نمیکند، مثلا زبان فارسی را پشتیبانی نمیکند و تنها زبانی که در حال حاضر پشتیبانی میکند زبان انگلیسی هست که باید توسط صفت lang بصورت زیر مشخص شود :
|
1 |
<tag_name lang="en">..</tag_name> |
