Демонстрация проблемы здесь.
http://www.vcn.bc.ca/~dugan/css3/newhtml.html
Многостолбцовый макет CSS3 корректно отображается в Firefox. Opera и IE8 отображают его как один столбец (это нормально). Однако Chrome пытается отобразить его как несколько столбцов и отрезать часть текста.
Есть ли способ заставить его работать с Chrome?
Кажется, чтобы показать весь текст, если вы установите высоту строки 1,5 в правиле p в dugan.css. По-прежнему существует дефект в точности того, как Chrome балансирует столбцы, вам может потребоваться ввести пустой абзац или добавить дополнение в последний абзац или что-то еще.
Настройка высоты строки (или размера шрифта, как рекомендовано в других местах) может удалить ошибку обрезания Chrome, но только случайно. Если вы хотите избежать этого программным путем, единственным рабочим решением на данный момент является:
.multicolumn p {
display: inline-block;
}
Вы можете развернуть это на все дочерние элементы многоколоночного контейнера, но, вероятно, вам нужно будет добавить width: 100%; в какой-то момент. Для получения дополнительной информации прочитайте дискуссию на
http://www.symphonious.net/2010/12/30/controlling-wrapping-in-css3-columns/
а также
http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/.
Кроме того, если обходной путь inline-block не помогает, причина отсечения текстовых битов может состоять из рекурсивного применения многоколоночного дизайна. Я наблюдал это в более сложном сценарии, чем выше, когда у удаленного родителя текстового контейнера с несколькими столбцами была своя макета столбца. Удаление столбца-столбца из контейнера верхнего уровня устраняет проблемы с разрывом столбцов.
body{
-webkit-column-break-inside:avoid;
}
В определенных ситуациях я видел, что заполнение и поля в столбчатом контенте вызывают эту проблему. Попробуйте:
.columnized-content { margin: 0; padding: 0; }