ویژگی max-width در CSS

max-width Property

ویژگی max-width در CSS بیشترین اندازه عرض عنصر را مشخص می کند. اگر اندازه عرضِ محتوایِ عنصر بیشتر از مقدار تعیین شده توسط ویژگی max-width باشد، این ویژگی فعال نخواهد شد.

نحوه نوشتار

/* استفاده از واحد های اندازه (طول) */
max-width: 3.5em;

/* مقدار با درصد */
max-width: 75%;

/* مقدار یا کلیدواژه */
max-width: none;

مقادیر

عرض (واحدهای اندازه)

بیشترین مقدار عرض را با یک مقدار مطلق مشخص می کند.

درصد​​

بیشترین مقدار عرض را بر حسب درصدی از عرض عنصر والد تعیین می کند.

auto​​​

اندازه این ویژگی را مرورگر محاسبه و اعمال می کند.

عملکرد این ویژگی را در مثال زیر می بینیم:

html

<div class="box1">
      .این یک متن نمونه است.این یک متن نمونه است.این یک متن نمونه است.این یک متن
      نمونه است
</div>
<div class="box2">
      .این یک متن نمونه است.این یک متن نمونه است.این یک متن نمونه است.این یک متن
      نمونه است
</div>
<div class="wrapper">
    <div class="box3">
        .این یک متن نمونه است.این یک متن نمونه است.این یک متن نمونه است.این یک
        متن نمونه است
    </div>
</div

css

div {
   margin: 20px 30px 0 0;
   height: 200px;
   background-color: orange;
   direction: rtl;
}
.box1 {
   width: 400px;
   max-width: 200px;
}
.box2 {
   max-height: auto;
}
.wrapper {
   width: 300px;
   height: 200px;
   background-color: lightgreen;
}
.box3 {
   background-color: pink;
   width: 50%;
   margin: 0;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی CSS پشتیبانی می کنند.