Geek Answers Handbook

Add minimum height in CSS3 with multiple columns

Can you add a minimum height for multiple CSS3 columns?

I would rather have one column when the text has only four rows, rather than forcing one row to the second column.

For example, I would prefer:

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 tips?

+8
css css3
source share
3 answers

There is no minimum height, but the minimum number of lines at the end of a paragraph in itself at the beginning of a column is called orphans (and opposite ... lines themselves at the beginning of a paragraph widows ). These are CSS properties that the columns must comply with according to the specification , but I did a quick test in Chrome and does not make any difference, so I assume that we have to wait until this is implemented.

An example of how it should be configured:

 p.columns { column-count: 2; orphans: 3 }
+7
source share

Min-height columns now support IE 10 and Firefox. However, in Webkit, the text overflows to the right of the container, as already explained in these two error reports. Error # 55740 Error # 65691

0
source share

I know this is old. But during my research, this thread came up first, so it's best to share your results. There is a partially supported column-fill attribute that does what you and I were looking for. Partial means, you must use browser-specific prefixes ...

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

Here are the MDN Documents

0
source share

More articles:


All Articles