ویژگی hyphens در CSS کنترل می‌کند که کلمات چگونه به خطوط تقسیم شوند زمانی که متن بیش از حد طولانی است و نمی‌تواند در یک خط جا شود. این ویژگی می‌تواند برای بهبود خوانایی متنی که در چند خط جا می‌شود، استفاده شود.
این ویژگی فقط برای المان‌های بلوکی اعمال می‌شود.
در ادامه، تمام مقادیر ممکن برای ویژگی hyphens آورده شده است:
- none: هیچ هیفن‌گذاری مجاز نیست.
- manual: رفتار هیفن‌گذاری دستی برای متن در مرورگرهای مبتنی بر WebKit تعیین می‌شود.
- auto: هیفن‌گذاری در نقاط مناسبی، طبق تعیینات مرورگر، مجاز است.
- initial: مقدار اولیه، که manual است.
- inherit: مقداری که از المان والد به ارث می‌رسد.
این ویژگی به شما امکان می‌دهد تا متن خود را بهبود دهید و بهترین شکل ممکن را برای نمایش متن بلوکی داشته باشید، به ویژه زمانی که متن به چند خط تقسیم می‌شود.
none Value
ویژگی hyphens: none در CSS جلوگیری از استفاده از هیفن در کلمات را اعمال می‌کند. حتی اگر کلمات برای جا شدن در یک خط بیش از حد طولانی باشند، از هیچ هیفنی استفاده نمی‌کند و کلمات به خطوط دیگری تقسیم نمی‌شوند.
در مثال زیر، ویژگی hyphens: none به عنوان مقدار برای یک المان با کلاس .hyphenated-none تعیین شده است. این باعث می‌شود که متن داخل آن المان، حتی اگر برای جا شدن در یک خط بیش از حد طولانی باشد، هیچگاه به خطوط دیگری تقسیم نشود و هیچ هیفنی اعمال نشود.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-none {
hyphens: none;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-none">It is a long established Contrary to popularised.</p>
</div >
</body>
</html>manual Value
ویژگی hyphens: manual در CSS به معنای اجازه استفاده از هیفن فقط در نقاطی است که کاربر به طور صریح هیفن‌ها را وارد کرده است. این ویژگی به عنوان مقدار پیش‌فرض تنظیم شده است.
در مثال زیر، ویژگی hyphens: manual به عنوان مقدار برای یک المان با کلاس .hyphenated-manual تعیین شده است. این باعث می‌شود که متن داخل آن المان فقط در نقاطی هیفن شود که کاربر به طور صریح وارد کرده است.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-manual {
hyphens: manual;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-manual">It is a long establ-ished Contrary to popula-rised.</p>
</div >
</body>
</html>auto Value
ویژگی hyphens: auto در CSS به معنای اجازه دادن به مرورگر برای خودکار هیفن زدن کلمات در نقاطی است که به عنوان مناسب تلقی می‌شوند، طبق قوانین هیفن‌زنی زبان.
در مثال زیر، ویژگی hyphens: auto به عنوان مقدار برای یک المان با کلاس .hyphenated-auto تعیین شده است. این باعث می‌شود که مرورگر به صورت خودکار کلمات را در نقاطی که به عنوان مناسب شناخته می‌شوند هیفن زند، طبق قوانین هیفن‌زنی زبان.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-auto {
hyphens: auto;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-auto">It is a long established Contrary to popularised.</p>
</div>
</body>
</html>initial Value
ویژگی hyphens: initial در CSS، ویژگی hyphens را به مقدار اولیه‌اش تنظیم می‌کند. مقدار اولیه برای ویژگی hyphens، manual است که به این معناست که هیفن‌زنی تنها در نقاطی که کاربر به صورت صریح هیفن‌ها را درج کرده باشد، مجاز است.
در مثال زیر، ویژگی hyphens: initial به عنوان مقدار برای یک المان با کلاس .hyphenated-initial تعیین شده است. این باعث می‌شود که هیفن‌زنی تنها در نقاطی که کاربر به صورت صریح هیفن‌ها را درج کرده است، مجاز باشد.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-initial {
hyphens: initial;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-initial">It is a long establ-ished Contrary to popu-larised.</p>
</div>
</body>
</html>inherit Value
ویژگی hyphens: inherit در CSS، مقدار ویژگی hyphens را از المان والد به ارث می‌برد. به این معناست که هیفن‌زنی المان، همانند هیفن‌زنی المان والد آن خواهد بود.
در مثال زیر، ویژگی hyphens: inherit به عنوان مقدار برای یک المان با کلاس .hyphenated-inherit تعیین شده است. این باعث می‌شود که هیفن‌زنی این المان، همانند هیفن‌زنی المان والد آن باشد که مقدار hyphens آن به صورت auto تنظیم شده است.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
padding: 2px;
hyphens: auto;
}
.hyphenated-inherit {
border: 2px solid #ac3f08;
background-color: #f05e40;
hyphens: inherit;
}
</style>
</head>
<body>
<div class="container">
There are many variations of embarrassing of Lorem Ipsum.
<p class="hyphenated-inherit">It is a long establ-ished Contrary to popu-larised.</p>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام