column-rule-width Property
ویژگی column-rule-width
در CSS ضخامت خطی را که ما بین ستون های محتوای یک عنصر کشیده می شود را مشخص می کند.
نحوه نوشتار
column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; column-rule-width: 1px; column-rule-width: 2.5em;
در مثال های زیر نحوه عملکرد این ویژگی را میبینیم:
html
<p class="pg1"> لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. </p> <hr /> <p class="pg2"> لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. </p> <hr /> <p class="pg3"> لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. </p>
css
p { padding: 15px; margin-top: 20px; text-align: justify; } .pg1 { column-count: 3; column-rule-style: solid; column-rule-width: thin; } .pg2 { column-count: 3; column-rule-style: double; column-rule-width: 7px; } .pg3 { column-count: 3; column-rule-style: dotted; column-rule-width: 0.5em; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.