Почему Chrome обрезает текст в моей многостолбцовой компоновке CSS3?

Question

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

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

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

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

Answer 1

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

Кроме того, если обходной путь встроенного блока не помогает, причина обрезки текстовых битов может заключаться в рекурсивном применении многостолбцового дизайна. Я наблюдал это в более сложном сценарии, чем в приведенном выше примере, когда у удаленного родителя многостолбцового текстового контейнера был собственный макет столбца. Удаление счетчика столбцов из контейнера верхнего уровня устранило проблемы с разрывом столбцов.

Answer 2

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

Answer 3

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

Answer 4

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

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