Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

add a min-height to CSS3 multi-columns

Tags:

css

Can you add a minimum height to CSS3 multi columns?

I'd rather have a single column when the text only has four lines rather than forcing a single line over to the second column.

For example I would rather:

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

Not this:

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

Any advice?

like image 839
uriah Avatar asked Dec 16 '11 11:12

uriah


Video Answer


1 Answers

There is no minimum height, but the minimum number of lines at the end of a paragraph on their own at the start of a column are called orphans (and the opposite... lines on their own at the start of a paragraph is widows). These are CSS properties which columns should honour according to the spec, but I've done a quick test in Chrome and it doesn't make any difference. So I guess we have to wait for this to be implemented.

An example of how it should be set up:

p.columns {
    column-count: 2;
    orphans: 3
}
like image 193
Nathan MacInnes Avatar answered Oct 03 '22 10:10

Nathan MacInnes