aggiungi un'altezza minima alle multi colonne di CSS3

Question

È possibile aggiungere un'altezza minima alle colonne multiple di CSS3?

Preferirei avere una singola colonna quando il testo ha solo quattro righe anziché forzare una singola riga verso la seconda colonna.

Per esempio avrei preferito:

Lorem ipsum dolor sit amet 
sodales id ipsum ipsum mauris 
interdum qui congue 
nisl quis, turpis tristique 

Non questo:

Lorem ipsum dolor sit amet  nisl quis, turpis tristique 
sodales id ipsum ipsum mauris 
interdum qui congue 

Qualche consiglio?

Answer 1

Non c'è altezza minima, ma il numero minimo di righe alla fine di un paragrafo per conto proprio all'inizio di una colonna è chiamato orphans (e le linee opposte ... da sole all'inizio di una il paragrafo è widows). Queste sono proprietà CSS che le colonne dovrebbero onorare in base allo spec, ma ho eseguito un test rapido in Chrome e non fa alcuna differenza. Quindi suppongo che dobbiamo aspettare che questo sia implementato.

Un esempio di come dovrebbe essere impostato:

p.columns { 
    column-count: 2; 
    orphans: 3 
} 

Answer 2

Min-altezza in colonne è ora supportato da IE 10 e Firefox. Nel Webkit invece il testo overflow alla destra di fuori del contenitore, come spiegato già in questa due bugreports Bug#55740 Bug#65691

Answer 3

lo so, questo è un vecchio. Ma durante la mia ricerca questo thread è venuto prima, quindi è meglio condividere i miei risultati. C'è un attributo partial supported chiamato column-fill che fa ciò che io e te stavamo cercando. mezzi parziali, si consiglia di utilizzare i prefissi specifiche del browser ...

column-count: 2; 
column-width: auto; 
column-fill: auto; 

Ecco il MDN Docs