добавьте минимальную высоту к многостолбцовым CSS3

Question

Можете ли вы добавить минимальную высоту для нескольких столбцов CSS3?

Я предпочел бы иметь один столбец, когда текст содержит только четыре строки, а не переносить одну строку во второй столбец.

Например, я бы предпочел:

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

Не это:

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

Любой совет?

Answer 1

Минимальной высоты не существует, но минимальное количество строк в конце абзаца в начале столбца называется orphans (а противоположные ... строки в началеабзац widows).Это свойства CSS, которым должны соответствовать столбцы в соответствии с spec , но я провел быстрое тестирование в Chrome, и это не имеет никакого значения.Поэтому я думаю, нам нужно подождать, пока это будет реализовано.

Пример того, как это должно быть настроено:

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

Answer 2

Я знаю, это старый.Но во время моего исследования эта тема возникла первой, поэтому я лучше поделюсь своими результатами.Существует атрибут частично поддерживаемый , который называется column-fill, который делает то, что мы с вами искали.Частично означает, что вы должны использовать браузерные префиксы ...

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

Вот документы MDN

Answer 3

Минимальная высота в столбцах теперь поддерживается IE 10 и Firefox.Однако в Webkit текст переполняется справа за пределами контейнера, как объяснено уже в этих двух отчетах об ошибках Ошибка # 55740 Ошибка # 65691