Почему Chrome отключает текст в моем многострочном расположении CSS3?

Демонстрация проблемы здесь.

http://www.vcn.bc.ca/~dugan/css3/newhtml.html

Многостолбцовый макет CSS3 корректно отображается в Firefox. Opera и IE8 отображают его как один столбец (это нормально). Однако Chrome пытается отобразить его как несколько столбцов и отрезать часть текста.

Есть ли способ заставить его работать с Chrome?

Ответ 1

Кажется, чтобы показать весь текст, если вы установите высоту строки 1,5 в правиле p в dugan.css. По-прежнему существует дефект в точности того, как Chrome балансирует столбцы, вам может потребоваться ввести пустой абзац или добавить дополнение в последний абзац или что-то еще.

Ответ 2

Настройка высоты строки (или размера шрифта, как рекомендовано в других местах) может удалить ошибку обрезания 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 не помогает, причина отсечения текстовых битов может состоять из рекурсивного применения многоколоночного дизайна. Я наблюдал это в более сложном сценарии, чем выше, когда у удаленного родителя текстового контейнера с несколькими столбцами была своя макета столбца. Удаление столбца-столбца из контейнера верхнего уровня устраняет проблемы с разрывом столбцов.

Ответ 3

body{ 
    -webkit-column-break-inside:avoid;
}

Ответ 4

В определенных ситуациях я видел, что заполнение и поля в столбчатом контенте вызывают эту проблему. Попробуйте:

.columnized-content { margin: 0; padding: 0; }