ویژگی max-block-size در CSS، حداکثر اندازه یک عنصر را در جهت مخالف جهت نوشتن آن (writing mode) تعیین می‌کند. برای جهت نوشتن افقی، این ویژگی معادل max-height است، در حالی که برای جهت نوشتن عمودی، با max-width همان معنی را دارد.
ویژگی max-inline-size حداکثر طول را برای ابعاد دیگر تعیین می‌کند.
استفاده از max-width و max-height برای اندازه‌های افقی و عمودی به کار می‌رود.
هنگام استفاده از max-height یا max-width، بهتر است برای حداکثر ارتفاع محتوا از max-block-size و برای حداکثر عرض از max-inline-size استفاده کنید. مثال‌هایی از حالت‌های نوشتن (writing modes) را بررسی کنید تا انواع حالت‌های نوشتن را ببینید.
مقادیر ممکن
شما می‌توانید مقدار ویژگی max-block-size را به هر مقداری که برای مقادیر max-height و max-width مجاز است، تنظیم کنید.
<length> – max-block-size را به یک مقدار مطلق تنظیم می‌کند.
<percentage> – max-block-size را به عنوان درصدی از اندازه بلوکی محور محتوایی بلوک تنظیم می‌کند.
none – محدودیت اندازه برای جعبه وجود ندارد.
max-content – max-block-size محتوایی درونی.
min-content – حداقل max-block-size.
fit-content – فضای موجود تا max-content، اما هرگز بیشتر از min(max-content، max(min-content، stretch)) نمی‌شود.
fit-content (<length-percentage>) – فرمول fit-content با استفاده از آرگومان ارائه شده به جای فضای موجود استفاده می‌شود، به عبارتی min(max-content، max(min-content، argument)).
writing-mode Effects
تأثیرات مقادیر writing-mode بر نگاشت max-block-size به max-height یا max-width به شرح زیر است:
مقادیر writing-mode max-block-size معادل است با horizontal-tb, lr (منسوخ شده), lr-tb (منسوخ شده), rl (منسوخ شده), rb (منسوخ شده), rb-rl (منسوخ شده) max-height vertical-rl, vertical-lr, sideways-rl (آزمایشی), sideways-lr (آزمایشی), tb (منسوخ شده), tb-rl (منسوخ شده) max-width مشخصه Writing Modes Level 3 ارزیابی مقادیر writing-mode sideways-lr و sideways-rl را به طور دیرینه در فرآیند طراحی حذف کرد. آنها ممکن است در سطح 4 بازیابی شوند. تنها متن SVG 1.x می‌تواند از حالت‌های نوشتاری lr، lr-tb، rl، rb و rb-tl استفاده کند؛ حالت‌های HTML دیگر برای استفاده از آنها مجاز نیستند.
length Value
این قطعه کد CSS مقدار max-block-size را برای عنصر div به 80 پیکسل تنظیم می‌کند، که حداکثر ارتفاع این عنصر را به 80 پیکسل محدود می‌کند. بنابراین، حتی اگر محتوای داخلی عنصر بیشتر از این ارتفاع باشد، ارتفاع عنصر همچنان به حداکثر 80 پیکسل محدود می‌شود.
در این مثال، متن عنصر div که شامل چند تگ عنوان و یک پاراگراف است، به ارتفاع حداکثر 80 پیکسل تنظیم می‌شود، حتی اگر متن و محتوا ویژگی این ارتفاع را بیشتر از این مقدار کند.
<html>
<head>
<style>
div {
background-color: orange;
border: 2px solid blue;
max-block-size: 80px;
}
</style>
</head>
<body>
<div>
<h3>Tutorialspoint</h3>
<h4>CSS max-block-size: 80px</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>percentage Value
این قطعه کد CSS مقدار max-block-size را برای عنصر div به 80 درصد تنظیم می‌کند، که حداکثر ارتفاع این عنصر را به 80 درصد از ارتفاع محدودکننده‌اش تنظیم می‌کند. بنابراین، ارتفاع عنصر به 80 درصد از ارتفاع محدودکننده خود محدود می‌شود.
در این مثال، متن عنصر div که شامل چند تگ عنوان و یک پاراگراف است، به ارتفاع حداکثر 80 درصد از ارتفاع محدودکننده‌اش تنظیم می‌شود، که می‌تواند ارتفاع مرورگر یا والد مستقیم آن باشد.
<html>
<head>
<style>
div {
background-color: violet;
border: 2px solid blue;
max-block-size: 80%;;
}
</style>
</head>
<body>
<div>
<h2>Tutorialspoint</h2>
<h3>CSS max-block-size: 80%</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>max-content Value
این قطعه کد CSS مقدار max-block-size را برای عنصر div به مقدار max-content تنظیم می‌کند. این به این معناست که ارتفاع عنصر div به گونه‌ای تنظیم می‌شود که به اندازه محتوای داخلی خود عرضه شود و به اندازه بیشینه ممکن ارتفاع گسترش یابد.
به عبارت دیگر، ارتفاع عنصر div در این حالت به اندازه محتوای داخلی خود گسترش می‌یابد، به‌طوری‌که ارتفاع آن متناسب با ارتفاع محتوا در داخل آن تنظیم می‌شود. در نتیجه، ارتفاع عنصر div با توجه به محتوای داخلی خود تغییر می‌یابد و به اندازه لازم برای جاگیری محتوا در داخلش گسترش می‌یابد.
<html>
<head>
<style>
div {
background-color: violet;
border: 2px solid blue;
max-block-size: max-content;
}
</style>
</head>
<body>
<div>
<h2>Tutorialspoint</h2>
<h3>CSS max-block-size: max-content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>With Horizontal and Vertical Text
این کد HTML و CSS مقدار max-block-size را در ارتباط با writing-mode برای نمایش متن در جهت‌های افقی و عمودی نشان می‌دهد. در اینجا دو عنصر div با کلاس‌های box1 و box2 وجود دارد که هر کدام از آنها دارای writing-mode مختلفی است.
-
عنصر div با کلاس box1:
- writing-mode: horizontal-tb؛ این مقدار writing-mode را برای نمایش متن به صورت افقی تنظیم می‌کند.
- max-block-size: 150px؛ این مقدار بیانگر ارتفاع بیشینه مجاز برای عنصر div است.
- min-block-size: 120px؛ این مقدار بیانگر ارتفاع حداقل مجاز برای عنصر div است.
-
عنصر div با کلاس box2:
- writing-mode: vertical-rl؛ این مقدار writing-mode را برای نمایش متن به صورت عمودی (از راست به چپ) تنظیم می‌کند.
- max-block-size: 150px؛ این مقدار بیانگر ارتفاع بیشینه مجاز برای عنصر div است.
- min-block-size: 120px؛ این مقدار بیانگر ارتفاع حداقل مجاز برای عنصر div است.
با این تنظیمات، عناصر div با کلاس box1 و box2 می‌توانند متن را به صورت افقی و عمودی نمایش دهند و ارتفاع آنها محدود به مقادیر max-block-size و min-block-size است.
<html>
<head>
<style>
div {
background-color: yellow;
border: 2px solid blue;
margin: 10px;
padding: 5px;
max-block-size: 150px;
min-block-size: 120px;
}
.box1 {
writing-mode: horizontal-tb;
}
.box2{
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="box1">
<h3>CSS max-block-size with writing-mode: horizontal-tb</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="box2">
<h3>CSS max-block-size with writing-mode: vertical-rl.</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام