Wartość none jest domyślną wartością właściwości column-span.
Domyślnie element HTML należący do treści, która została podzielona na kilka kolumn nie zwiększa swojego zasięgu na żadną dodatkową kolumnę.
column-span:none;
ten tekst wyświetlony w oknie przeglądarki internetowej
przykładowy element "p"
został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
Przykładowy element "p" należący do treści, która została podzielona na kilka kolumn nie zwiększył swojego zasięgu na więcej kolumn.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
column-count:3;
font-size:1.3em;
background-color:#7DCDE8;
}
p {
margin:0;
text-align:center;
background-color:red;
}
</style>
</head>
<body>
<div>
ten tekst wyświetlony w oknie przeglądarki internetowej <p>przykładowy element "p"</p> został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
</div>
</body>
</html>
Za pomocą wartości all właściwości column-span możemy sprawić, że interesujący nas element HTML należący do treści, która została podzielona na kilka kolumn zwiększy swój zasięg na wszystkie kolumny.
Treść występująca przed elementem HTML posiadającym właściwość "column-span" wraz z wartością "all" zostanie równomiernie rozdzielona (jeżeli jest to możliwe) pomiędzy tymi kolumnami, na które zwiększył swój zasięg wspomniany element HTML.
column-span:all;
ten tekst wyświetlony w oknie przeglądarki internetowej
przykładowy element "p"
został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
Przykładowy element "p" należący do treści, która została podzielona na kilka kolumn zwiększył swój zasięg na wszystkie kolumny, ponieważ do wspomnianego elementu "p" została dodana właściwość "column-span" wraz z wartością "all".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
column-count:3;
font-size:1.3em;
background-color:#7DCDE8;
}
p {
column-span:all;
margin:0;
text-align:center;
background-color:red;
}
</style>
</head>
<body>
<div>
ten tekst wyświetlony w oknie przeglądarki internetowej <p>przykładowy element "p"</p> został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
</div>
</body>
</html>
