ویژگی tab-size در CSS برای تعیین عرض کاراکترهای تب (U+0009) درون یک عنصر استفاده می‌شود. این ویژگی به شما امکان می‌دهد تا فضای بصری کاراکترهای تب را کنترل کنید، که وقتی کدها یا محتوای دیگری نمایش داده می‌شوند که کاراکترهای تب در آنها مهم هستند، مفید است.
مقادیر ممکن:
<integer>: مشخص می‌کند عرض کاراکترهای تب به عنوان ضریبی از عرض یک کاراکتر فضای تکی است. به عنوان مثال، مقدار ۴ باعث می‌شود که کاراکترهای تب چهار بار عریض‌تر از یک کاراکتر فضای تکی باشند. نمی‌تواند منفی باشد.<length>: عرض کاراکترهای تب را با استفاده از یک مقدار ثابت طولانی مشخص می‌کند، مانند پیکسل (px)، پوینت (pt) یا ems (em). نمی‌تواند منفی باشد.
با استفاده از این ویژگی، می‌توانید فاصله‌های بین کاراکترهای تب را در محتوای متنی کنترل کنید و بصورت ویژه در نمایش کدها یا محتوایی که کاراکترهای تب در آنها مهم هستند، استفاده کنید.
Expanding By Character Count
این کد HTML/CSS نحوه استفاده از ویژگی tab-size را برای تنظیم عرض کاراکترهای تب به تعداد کاراکترها نشان می‌دهد.
در این کد، دو عنصر <pre> با کلاس‌های tab1 و tab2 وجود دارد. سپس با استفاده از ویژگی tab-size در CSS، عرض کاراکترهای تب برای هر یک از این عناصر تعیین می‌شود.
.tab1دارای عرض کاراکترهای تب ۸ است..tab2دارای عرض کاراکترهای تب ۱۲ است.
به این ترتیب، متن درون این دو عنصر <pre> با توجه به عرض تعیین شده برای کاراکترهای تب نمایش داده می‌شود.
<html>
<head>
<style>
.tab1 {
-moz-tab-size: 8;
tab-size: 8;
}
.tab2 {
-moz-tab-size: 12;
tab-size: 12;
}
</style>
</head>
<body>
<pre class="tab1">
CSS tab-size with 8.
</pre>
<pre class="tab2">
CSS tab-size with 12.
</pre>
</body>
</html>Comparing To The Default Size
این کد HTML/CSS نشان می‌دهد که چگونه می‌توان از ویژگی tab-size برای تنظیم اندازه کاراکترهای تب استفاده کرد و آن را با اندازه پیش‌فرض مقایسه کرد.
- این کد دارای چهار عنصر
<p>است که با استفاده ازwhite-space: pre;فاصله‌گذاری فضای سفید را حفظ می‌کنند. - عنصر اول نشان می‌دهد که بدون استفاده از
tab-size، اندازه پیش‌فرض تب چگونه است. - عنصر دوم با استفاده از تب فضای سفید را به اندازه‌ای که اندازه پیش‌فرض تب تعیین می‌کند، باز می‌گذارد.
- عنصر سوم با استفاده از ویژگی
tab-size، اندازه تب را به ۳ کاراکتر تنظیم می‌کند. - عنصر چهارم فضای سفید را با استفاده از سه فاصله فضایی نمایش می‌دهد.
<html>
<head>
<style>
p {
white-space: pre;
}
.tab1 {
tab-size: 3;
}
</style>
</head>
<body>
<p>Without tab-size</p>
<p> Default tab-size to 8 characters.</p>
<p class="tab1"> tab-size with 3 characters.</p>
<p> tab-size with 3 spaces.</p>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام