ویژگی column-width در CSS

column-width Property

ویژگی column-width در CSS عرض ستون های محتوای عنصر را مشخص می کند.

نحوه نوشتار

column-width: auto;
column-width: 150px;
column-width: 10rem;

نکته: زمانی که از این ویژگی استفاده می کنید، نباید از ویژگی column-count استفاده نباید. زیرا ویژگی column-width بر حسب اندازه ای که برای عرض ستون در نظر گرفته اید تعداد ستون های محتوا را مشخص می کند.

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

html

<div class="pg1">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</div>
<hr />
<div class="pg2">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</div>

css

body {
  direction: rtl;
  font-family: "Segoe UI";
}
div {
   padding: 15px;
   margin-top: 20px;
}
.pg1 {
   column-width: 200px;
}
.pg2 {
    column-width: 7em;
}

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

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