column-width
column-width CSS 屬性設定多列布局中理想的列寬。容器將容納儘可能多的列，且所有列的寬度都不會小於 column-width 值。如果容器的寬度窄於指定值，則單列的寬度將小於宣告的列寬。
試一試
column-width: auto;
column-width: 6rem;
column-width: 120px;
column-width: 18ch;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
#example-element {
width: 100%;
columns: auto;
text-align: left;
}
此屬性可幫助您建立適合不同螢幕尺寸的響應式設計。尤其是在存在 column-count 屬性（具有優先權）的情況下，您必須指定所有相關的長度值才能實現精確的列寬。在水平文字中，這些值包括 width、column-width、column-gap 和 column-rule-width。
語法
css
/* Keyword value */
column-width: auto;
/* <length> values */
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;
/* Global values */
column-width: inherit;
column-width: initial;
column-width: revert;
column-width: revert-layer;
column-width: unset;
column-width 屬性指定為以下值之一。
值
<length>-
表示最佳列寬。實際列寬可能與指定值不同：在需要填充可用空間時可能會更寬，在可用空間太小時可能會更窄。該值必須嚴格為正數，否則宣告無效。百分比值也無效。
auto-
列的寬度由其他 CSS 屬性決定，例如
column-count。
正式定義
正式語法
column-width =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<length-percentage> =
<length> |
<percentage>
示例
以畫素設定列寬
HTML
html
<p class="content-box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p>
CSS
css
.content-box {
column-width: 100px;
}
結果
規範
| 規範 |
|---|
| CSS Box Sizing Module Level 3 # 列大小調整 |
| CSS Multi-column Layout Module Level 1 # cw |
瀏覽器相容性
載入中…