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

Question

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

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" или функцию переноса слов или что-то в этом роде... э-э-эЛюбые идеи?

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

Answer 1

Попробуйте это:

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

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

Ч / т https://stackoverflow.com/a/7785711/1431728

Answer 2

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

p {
  display:inline-block;
}

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

Answer 3

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

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

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

Answer 4

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