ویژگی CSS hyphenate-character به شما امکان می‌دهد که کاراکتری را که باید به عنوان نقطه‌ی شکاف‌زنی استفاده شود هنگامی که متن با استفاده از ویژگی hyphens شکاف‌زنی می‌شود، مشخص کنید.
هنگامی که متن شکاف‌زنی می‌شود، مرورگر یک کاراکتر خط‌تیره را در نقاط مناسب داخل کلمات وارد می‌کند تا ظاهر بصری متن چیده‌شده بهتر شود. ویژگی hyphenate-character به شما امکان می‌دهد که کاراکتر استفاده شده برای شکاف‌زنی را سفارشی‌سازی کنید.
مقادیر ممکن:
- <string>: این ویژگی به عنوان یک رشته در انتهای خط قبل از شکاف‌زنی استفاده می‌شود.
- auto: مقدار پیش‌فرض. مرورگر مقدار مناسبی را بر اساس قواعد تایپوگرافی زبان محتوا تعیین می‌کند. تنظیم صریح مقدار لازم برای نادیده گرفتن یک مقدار موروث است.
اعمال بر روی: همه‌ی عناصر.
سینتکس:
hyphenate-character: | auto; این ویژگی به شما اجازه می‌دهد تا یک رشته خاص را برای جایگزینی با خط‌تیره بندیکنید و به مرورگر دستور دهید که بر اساس قواعد تایپوگرافی یک رشته مناسب را انتخاب کند (پیش‌فرض).
auto Value
در این بخش، یک نمونه کد HTML و CSS ارائه شده است که نحوه استفاده از مقدار auto برای ویژگی hyphenate-character را نشان می‌دهد. این ویژگی به مرورگر اجازه می‌دهد که یک کاراکتر مناسب برای شکاف‌زنی خودکار متن را انتخاب کند.
در کد ارائه شده:
- یک عنصر
<div>تعریف شده است که محتوای متنی دارد. - در CSS، به عنصر
<div>اعمالی اعمال شده است. این عنصر دارای یک پهنا (width) و حاشیه (border) است. همچنین ویژگی hyphens نیز با مقدار auto تنظیم شده است که به مرورگر اجازه می‌دهد که شکاف‌زنی خودکار متن را اعمال کند. - ویژگی hyphenate-character نیز با مقدار auto تنظیم شده است که به مرورگر اجازه می‌دهد که کاراکتر مناسب برای شکاف‌زنی خودکار متن را انتخاب کند.
با اجرای این کد، متن داخل عنصر <div> به طور خودکار با استفاده از ویژگی hyphens و hyphenate-character شکاف‌زنی می‌شود و کاراکتر مناسبی برای این کار انتخاب می‌شود، به طوری که ظاهر بصری متن بهینه شود.
<html>
<head>
<style>
div {
width: 80px;
border: 2px solid blue;
hyphens: auto;
hyphenate-character: auto;
}
</style>
</head>
<body>
<div>CSS hyphenatecharacter auto</div>
</body>
</html> Value
در این بخش، یک نمونه کد HTML و CSS ارائه شده است که نحوه استفاده از مقدار <string> برای ویژگی hyphenate-character را نشان می‌دهد. این ویژگی به شما امکان می‌دهد تا یک کاراکتر خاص را به عنوان نقطه‌ی شکاف‌زنی در متن مشخص کنید.
در کد ارائه شده:
- یک عنصر
<div>تعریف شده است که محتوای متنی دارد و سه عنصر دیگر نیز با کلاس‌های مختلف (box1، box2، box3) تعریف شده‌اند. - در CSS، به عنصر
<div>و عناصر با کلاس‌های مختلف اعمالی اعمال شده است. هر یک از این عناصر دارای یک پهنا (width) و حاشیه (border) است. همچنین ویژگی hyphens نیز با مقدار auto تنظیم شده است که به مرورگر اجازه می‌دهد که شکاف‌زنی خودکار متن را اعمال کند. - ویژگی hyphenate-character برای هرکدام از عناصر با کلاس‌های مختلف با مقادیر “=”، “*” و “%” تنظیم شده است، که به مرورگر می‌گوید که از کاراکتر مشخص شده برای شکاف‌زنی متن استفاده کند.
با اجرای این کد، متن داخل هر عنصر <div> به طور خودکار با استفاده از ویژگی hyphens و hyphenate-character شکاف‌زنی می‌شود و کاراکتر مشخص شده برای هر عنصر انتخاب می‌شود، که می‌تواند “=”، “*” یا “%” باشد. این نمونه نشان می‌دهد که با تغییر کاراکتر شکاف‌زنی، شکل ظاهری متن می‌تواند متفاوت باشد.
<html>
<head>
<style>
div {
width: 80px;
border: 2px solid blue;
hyphens: auto;
}
.box1 {
hyphenate-character: "=";
}
.box2 {
hyphenate-character: "*";
}
.box3 {
hyphenate-character: "%";
}
</style>
</head>
<body>
<h3>hyphenate-character: "="</h3>
<div class="box1">CSS hyphenatecharacter auto</div>
<h3>hyphenate-character: "*"</h3>
<div class="box2">CSS hyphenatecharacter auto</div>
<h3>hyphenate-character: "%"</h3>
<div class="box3">CSS hyphenatecharacter auto</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام