ویژگی column-span در CSS

column-span Property

ویژگی column-span در CSS این امکان را می دهد تا عنصر در طول ستون های محتوا گسترش پیدا کند.

نحوه نوشتار

column-span: none;
column-span: all;

مقادیر

none​

عنصر در طول ستون های محتوا گسترش پیدا نمی کند.

all​

عنصر در طول ستون های محتوا گسترش پیدا می کند.

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

html

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

css

body {
   direction: rtl;
   font-family: "Segoe UI";
}
div {
   padding: 15px;
   margin-top: 20px;
   text-align: justify;
}
div > h4 {
   width: 100%;
   padding: 3px 3px 3px 0;
   background-color: lime;
   margin: 0 0 10px 0;
}
.pg1 {
   column-count: 3;
   column-rule: thin solid red;
}
.pg1 > h4 {
   column-span: none;
}
.pg2 {
   column-count: 3;
   column-rule: thin solid red;
}
.pg2 > h4 {
   column-span: all;
}

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

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