CSS3 Columns - Принудительно не ломать / расщеплять элемент?

Question

Я использую некоторые CSS3-столбцы (column-count: 2;column-gap: 20px;), чтобы разделить некоторый контент на два столбца. В моем контенте у меня есть <p>, затем <blockquote> и еще один <p>.

Мой вопрос: есть ли способ предотвратить разбиение моего <blockquote> (или любого другого указанного элемента) на два столбца?

Например, в настоящее время my <blockquote> частично находится в столбце 1, а частично в столбце 2.

В идеале я хотел бы сделать так, чтобы <blockquote> оставался вместе в столбце 1 или 2.

Есть идеи, можно ли этого достичь?

Спасибо!

Answer 1

Добавьте display:inline-block; к элементу, который хотите предотвратить расщепление.

Answer 2

Теоретически собственность, которую вы ищете, ...

blockquote {
  column-break-inside : avoid;
}

Однако, в прошлый раз, когда я проверял, что он не был должным образом реализован в Webkit, понятия не имею о Firefox. Мне повезло больше:

blockquote {
  display: inline-block;
}

Поскольку средство визуализации обрабатывает его как изображение и не разбивает его на столбцы.

Answer 3

Просто общие справки для тех, кто сталкивается с этим форумом и нуждается в решении для Firefox.

На момент написания этой статьи Firefox 22.0 не поддерживал свойство column-break-inside даже с префиксом -moz-.

Но решение довольно простое: просто используйте display:table;.Вы также можете сделать **display:inline-block; Проблема с этими решениями заключается в том, что элементы списка потеряют свой элемент стиля списка или значок маркера.

** Кроме того, одна проблема, с которой я столкнулся display:inline-block;, состоит в том, чточто если текст в двух последовательных элементах списка очень короткий, нижний элемент обернется и будет встроен в один над ним.

display:table; - наименее худшее из обоих решений.

Больше информации здесь: http://trentwalton.com/2012/02/13/css-column-breaks/

Answer 4

Согласно MDN правильное решение -

blockquote {
  break-inside: avoid-column;
}

Однако еще не реализовано во всех браузерах, поэтому практическое решение:

blockquote {
  display: inline-block;
}