Свойство CSS column-span
Свойство column-span определяет, будет ли элемент охватывать одну колонку или все колонки. Это одно из свойств CSS3. Оно имеет четыре значения: none, all, initial и inherit. none — значение по умолчанию, при котором элемент остается в одной колонке. Значение all заставляет элемент охватывать все колонки. Это свойство полезно для широких элементов, таких как изображения или заголовки, позволяя выбрать, будут ли они охватывать все колонки или останутся в одной.
INFO
Элемент может охватывать колонки только в том случае, если он является блочным элементом.
| Начальное значение | none |
|---|---|
| Применяется к | блочным элементам в потоке |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS Multi-column Layout Module Level 1 |
| Синтаксис DOM | object.style.columnSpan = "all"; (Примечание: в JavaScript свойства CSS используют camelCase) |
Синтаксис
Синтаксис свойства CSS column-span
css
column-span: none | all | initial | inherit;Пример: значение none
html
<!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>Результат
В следующем примере заголовок охватывает все четыре колонки.
Пример: значение all
html
<!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>Пример: значение initial
html
<!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>Пример: значение inherit
html
<!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>Значения
| Значение | Описание | Запустить |
|---|---|---|
| none | Это значение по умолчанию. Элемент не охватывает все колонки; он остается в одной колонке. | Запустить » |
| all | Элемент охватывает все колонки. | Запустить » |
| initial | Устанавливает свойство в значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какова функция свойства 'column-span' в CSS?