CSS - column-span 屬性

CSS 的column-span屬性決定了一個元素可以跨越多少列。

語法

column-span: none | all | initial | inherit;

屬性值

值	描述
none	元素跨越一列。
all	元素跨越所有列。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS 列跨度屬性示例

以下示例說明了使用不同值的columns-span屬性。

使用 none 值的列跨度屬性

要讓元素只跨越一列，我們使用none值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 60px;
         column-rule: 5px dashed red;
      }

      h3 {
         column-span: none;
         padding: 3px;
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-span property
   </h2>
   <p>
   <strong>
      column-span: None
   </strong> 
      (The element spans across one column)
   </p>
   <div class="multicol-col-rule">
      <p>
         <h3>
            About TutorialsPoint Company
         </h3>
            TutorialsPoint is a widely used online learning
            platform offering comprehensive resources on 
            diverse subjects, including programming, web
            development, data science, and more. It provides
            free, user-friendly tutorials, guides, and courses
            tailored to learners of all levels. Each topic
            features clear explanations, interactive examples,
            and practical exercises to enhance understanding.
            With a focus on self-paced learning, TutorialsPoint
            aims to make complex concepts accessible and 
            manageable. Its extensive library and structured
            content support students, professionals, and 
            hobbyists in expanding their skills and knowledge
            efficiently and effectively, making it a 
            valuable tool for anyone looking to learn new
            technologies and techniques.
      </p>
   </div>
</body>

</html>

使用 all 值的列跨度屬性

要讓元素跨越所有現有的列，我們使用all值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 60px;
         column-rule: 5px dashed red;
      }

      h3 {
         column-span: all;
         padding: 3px;
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-span property
   </h2>
   <p>
   <strong>
      column-span: All
   </strong> 
      (The element spans across all columns)
   </p>
   <div class="multicol-col-rule">
      <p>
         <h3>
            About TutorialsPoint Company
         </h3>
            TutorialsPoint is a widely used online learning
            platform offering comprehensive resources on
            diverse subjects, including programming, web
            development, data science, and more. It provides
            free, user-friendly tutorials, guides, and courses
            tailored to learners of all levels. Each topic
            features clear explanations, interactive examples,
            and practical exercises to enhance understanding.
            With a focus on self-paced learning, TutorialsPoint
            aims to make complex concepts accessible and
            manageable. Its extensive library and structured
            content support students, professionals, and
            hobbyists in expanding their skills and knowledge
            efficiently and effectively, making it a
            valuable tool for anyone looking to learn new
            technologies and techniques.
      </p>
   </div>
</body>

</html>

支援的瀏覽器

屬性
column-span	50.0	10.0	71.0	9.0	37.0

css_properties_reference.htm

列印頁面