Filoweb.it

Suddividere il testo in più colonne regola column-span


FB TW G+ whatsapp RSS FEED News letter
CSS
Suddividere il testo in più colonne regola column-span


  Per il titolo h1 è stata definita la proprietà column-span con il valore all. Cosa si ottiene? Che il titolo si espande fino a comprendere tutte le colonne. Al posto avremmo potuto usare un valore numerico. Usando 2, per esempio, il testo si sarebbe esteso solo sulle prime due colonne.

h1 {font-size: 18px; 
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}

----

<!DOCTYPE html>
<html>
<head>
<title>Layout multicolonna - Esempio - Guida CSS3 HTML.it</title>
<style type=" text/css" >
body {
font-family: Georgia,Times New Roman,serif;}
#container {
width: 750px;
margin: 20px auto;
-webkit-column-width:350px;
-webkit-column-gap:25px;
-webkit-column-rule: 1px solid black;
-moz-column-width:350px;
-moz-column-gap:25px;
-moz-column-rule: 1px solid black;
column-width: 350px;
column-gap: 25px;
column-rule: 1px solid black;
}

h1 {font-size: 18px; 
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}
h2 {font-size: 16px;}
p {font-size: 14px;}
</style>
</head>
<body>
<div id=" container" >
<h1>Test multicolonna lorem ipsum dolor sit amet, consectetur adipisicing</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Titolo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Titolo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html> 
FB TW G+ whatsapp RSS FEED News letter

filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito sono di proprietà di Filippo Brunelli salvo diversamente indicato.
L'uso delle immagini e del testo è gratuito per uso personale ed è subbordinato alla citazione della fonte.
Brunelli Filippo declina ogni responsabilità per l'uso che viene fatto delle informazioni presenti nel sito.
FILOWEB.it Piccolo quaderno degli appunti. Argomento: CSS, Titolo:Suddividere il testo in più colonne regola column-span. Altri script riguardano: CSS, Jscript, .net, Classic Asp, HTML, Jquery, varie, url rewrite, pagina protetta da password, ecc. Altro su https://www.filoweb.it