چند ستونه کردن متن در CSS3

چاپ

چند ستونه کردن متن در CSS3

Wiki

با CSS3، می توانید مانند روزنامه ها که چند ستونه هستند، متن را در صفحه به صورت چند ستونه نمایش دهید.

در این بیاموز، با خاصیت های زیر آشنا می شوید:


پشتیبانی مرورگرها از قابلیت چند ستونه کردن متن در CSS3

Wiki

خاصیتپشتیبانی مرورگرها
column-count
column-gap
column-rule

مرورگرهای Internet Explorer 10 و Opera ویژگی چند ستونه را پشتیبانی می کنند.

مرورگر Firefox به پیشوند -moz- نیاز دارد.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.


ایجاد ستون های چندگانه در CSS3

Wiki

خصوصیت column-count تعیین می کند که متن باید به چند قسمت تقسیم شود:

مثال (چند ستونه کردن متن در CSS3)

تقسیم متن به 3 ستون در عنصر <div>:

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
خودتان امتحان کنید »

تعیین فاصله بین ستون ها در CSS3

Wiki

با استفاده از خصوصیت column-gap می توانید فاصله بین ستون ها را مشخص نمایید:

مثال (چند ستونه کردن متن در CSS3)

تنظیم 40 پیکسل برای فاصله بین ستون ها:

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
خودتان امتحان کنید »

قوانین بین ستون ها در CSS3

Wiki

خصوصیت column-rule عرض (width)، سبک (style) و رنگ (color) بین ستون ها را معین می کند.

مثال (چند ستونه کردن متن در CSS3)

مشخص کردن عرض، سبک و رنگ بین ستون ها:

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
خودتان امتحان کنید »

خاصیت های ستون های چندگانه در CSS3

Wiki

خاصیتتوضیحاتCSS
column-count تعداد ستون هایی که یک عنصر باید به آن تقسیم شود. 3
column-fill چگونگی پر شدن ستون ها را مشخص می کند. 3
column-gap فاصله بین ستون ها را مشخص می کند. 3
column-rule یک خصوصیت مختصر برای تنظیم عرض، سبک و رنگ بین ستون ها. 3
column-rule-color رنگ بین ستون ها را مشخص می کند. 3
column-rule-style سبک یا Style بین ستون ها را مشخص می کند. 3
column-rule-width عرض بین ستون ها را مشخص می کند. 3
column-span مشخص می کند در میان چه تعداد از ستون های یک عنصر باید محدود شود. (یک ستون یا تمام ستون ها را به خود اختصاص دهد) 3
column-width عرض ستون ها را مشخص می کند. 3
columns یک خصوصیت مختصر برای تنظیم column-width و column-count 3