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; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.