W3docs
es
Iniciar sesión

Propiedad column-span de CSS

The column-span CSS property defines how to span the element across one column or all columns. Learn about values and see examples.

La propiedad column-span define si un elemento se extiende a través de una columna o de todas las columnas. Es una de las propiedades de CSS3. Tiene cuatro valores: none, all, initial e inherit. none es el valor predeterminado, que mantiene el elemento dentro de una sola columna. El valor all hace que el elemento se extienda a través de todas las columnas. Esta propiedad es útil para elementos anchos, como imágenes o encabezados, lo que te permite elegir si se extienden por todas las columnas o permanecen en una sola.

info

Un elemento solo puede extenderse a través de columnas si es un elemento de nivel de bloque.

Valor inicialnone
Se aplica aelementos de nivel de bloque en flujo
HeredableNo.
AnimableNo.
VersiónCSS Multi-column Layout Module Level 1
Sintaxis DOMobject.style.columnSpan = "all"; (Nota: las propiedades CSS usan camelCase en JavaScript)

Sintaxis

Sintaxis de la propiedad column-span de CSS

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

Ejemplo: valor none

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: none;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Propiedad column-span de CSS

En el siguiente ejemplo, el encabezado se extiende a través de las cuatro columnas.

Ejemplo: valor all

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: all;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo: valor initial

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: initial;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2> 
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo: valor inherit

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: inherit;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Pruébalo tú mismo »

Valores

ValorDescripciónProbar
noneEste es el valor predeterminado. El elemento no se extiende a través de todas las columnas; permanece en una sola columna.Probar »
allEl elemento se extiende a través de todas las columnas.Probar »
initialEstablece la propiedad en su valor predeterminado.Probar »
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

¿Cuál es la función de la propiedad 'column-span' en CSS?