Как сохранить абзацы вместе в столбцах HTML?

Итак, у меня есть страница, которая выглядит как...

I am a monkey
I am a monkey too, with
additional information.
I am also a monkey

Если я обернуть это в CSS с помощью тега -webkit-columns: 2, он отобразится как...

I am a monkey               additional information
I am a monkey too, with     I am also a monkey

Я бы хотел, чтобы он не разбивал абзацы в этом случае.

Я ищу что-то вроде "nobr" или функцию переноса слов или что-то еще... eeek. Любые идеи?

(Позже...) кажется, что я могу сделать это в Firefox, но не в Chrome. Хм...

Ответ 1

Вы можете установить

p {
  display:inline-block;
}

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

Ответ 2

Попробуйте следующее:

-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;

Первый должен работать с Chrome/Safari; второй Firefox. Третий - совместимый со стандартами "правильный" способ.

H/t fooobar.com/questions/34311/...

Ответ 3

Несмотря на то, что на вопрос ответили, поддержка браузера для столбцов CSS намного лучше, так как этот вопрос был впервые опубликован. Вопрос все еще довольно высок в результатах поиска, и сообщение в блоге, на которое ссылается ответ, тоже довольно старый. Итак, быстрый ответ: лучший способ удержать элементы от разбиения на столбцы - использовать свойство break-inside. Например:

p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

Для получения дополнительной информации см. эту запись в CSS-трюках.

Ответ 4

Как использовать таблицу с невидимыми границами? Возможно, это может сделать трюк.