Разрывы разделов для очень длинных столбцов CSS

Используя CSS-столбцы, я могу форматировать смежные данные в столбцы, не разбивая их вручную на разделы. Это особенно полезно при отображении сложного, динамического контента.

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

В традиционных макетах печати проблемы читаемости с очень длинными столбцами, как правило, уменьшаются путем разбиения столбцов на разделы, которые "перезапускают" столбец. (Сами физические страницы образуют естественное разделение, которого нет у бесконечно прокручиваемой веб-страницы). На рисунке ниже показано, как горизонтальные разрывы секций делают столбчатое содержимое длиннее, чем высота области просмотра, более читабельным.

(Обратите внимание, что под "перезапуском столбцов" я подразумеваю, что, как только вы достигнете конца левого раздела столбца, вы затем прочитаете правый столбец этого раздела, а затем прокрутите вниз, чтобы прочитать оба столбца следующего раздела. https://www.shutterstock.com/image-vector/newspaper-template... может проиллюстрировать это более четко).

Существует очень мало гарантий на содержание столбца. Он может содержать любое количество абзацев, изображений, вложенных блочных элементов, вложенных встроенных элементов и т.д. Пример разметки показан ниже.

Ответы

Ответ 1

Там на самом деле довольно простое решение с использованием CSS-столбцов. И атрибут `column-span`.

Вы можете добиться всего этого БЕЗ внедрения чего-либо в контент и просто стилизации HTML-тегов.

По сути, модуль макета столбцов CSS предназначен для копирования макетов печатного дизайна (например, газеты), где стилистическим правилом является то, что заголовки должны пересекать все столбцы истории. Поэтому любой элемент с column-span: all будет разделять столбцы и вызывать сброс обертки. (обратите внимание, цвета в моем примере показывают обертку).

В этом случае, поскольку вы не контролируете контент, лучше всего обеспечить общую структуру для ваших пользователей. Например, я бы установил теги H1, H2, H3, а также <hr> и, возможно, некоторые изображения, чтобы разбить столбцы. Разрешите своим пользователям реализовывать эти теги, как они это обычно делают в письменной форме, и вы получите хороший макет. Однако, если они решат НЕ реализовывать какие-либо из этих вещей, то это до них, и вы должны позволить этому обернуть и вызвать длинный свиток. (Я мог бы также предложить предоставить предварительный просмотр, чтобы они могли видеть, как будет выглядеть результат)

Пример диапазона столбца

.columns {
	margin: 30px;
	columns: 2;
}

h1, h2, h3, h4, h5 {
	column-span: all;
}



// simply to show where things wrap
h2 {
	background-color: #eee;
	padding: 5px 10px;
}

h5 {
	border-bottom: 1px solid #ddd;
	padding-bottom: 5px;
	text-align: center;
}

p:nth-of-type(1) {
	color: blue;
}

p:nth-of-type(2) {
	color: green;
}

p:nth-of-type(3) {
	color: orange;
}
p:nth-of-type(4) {
	color: teal;
}

<div class="columns">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis tellus non nunc tincidunt, vitae rutrum metus dapibus. Fusce at ante massa. Nam et nibh aliquet, porta nibh quis, rhoncus tortor. Aenean vestibulum neque sed urna lacinia aliquet.
		Vestibulum facilisis egestas commodo. Cras sed maximus odio. Mauris posuere, ante id posuere facilisis, ligula libero consectetur lacus, at pellentesque nibh elit at magna. Proin sollicitudin quis nibh at viverra. Duis feugiat, lorem vitae facilisis
		blandit, augue tortor cursus orci, sed porttitor eros elit at sapien. Quisque eleifend pulvinar pellentesque.
	</p>

	<h2>This is a header (h2) with column-span: all set on it</h2>

	<p>
		Donec blandit sapien leo, id aliquam purus vulputate a. Sed vel turpis ut eros suscipit blandit vel id eros. Nullam ut mauris luctus magna sollicitudin venenatis. Pellentesque leo mauris, malesuada nec purus ut, vestibulum malesuada lectus. Nullam ultricies
		tellus sapien, ut fermentum risus pretium a. Nullam magna urna, ullamcorper non congue a, efficitur nec orci. Ut aliquam molestie nisi. In at accumsan purus. Etiam non tempor ipsum. Maecenas gravida mauris in nibh vehicula ullamcorper. Sed libero lorem,
		faucibus eu lorem ut, gravida eleifend enim. Nunc vehicula fermentum consequat. Phasellus a pellentesque nisl. Nulla vel suscipit nibh, ac cursus dui. Suspendisse elementum dapibus risus. Nam egestas congue finibus.
	</p>

	<p>
		Nunc vel risus nec nulla dignissim congue. Cras sit amet lacus nec nisl mollis pellentesque in vel purus. Suspendisse efficitur mollis nibh, congue facilisis libero auctor ac. Nulla facilisi. Etiam ut erat eget erat egestas suscipit. Curabitur vitae varius
		mauris. Sed accumsan diam eros, id dapibus metus rutrum at. Nunc vitae pretium massa. Aenean quis mauris leo. Nulla egestas ligula eu libero interdum feugiat. Aliquam maximus erat et tortor auctor varius. Nulla in pharetra leo, vel suscipit nunc. Orci
		varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec nec egestas ante, vitae sollicitudin arcu. Pellentesque posuere tempus nibh, nec tempus eros pellentesque ac.
	</p>

	<p>
		Curabitur tempus massa dolor, nec congue purus efficitur id. Phasellus a dictum mauris. In porta nulla lectus, pretium semper erat semper id. Fusce ornare fringilla mi, ut auctor tortor semper non. Aliquam sed felis fermentum, molestie dolor vel, eleifend
		diam. Donec accumsan bibendum mi, sed pretium tortor pulvinar nec. Aliquam et metus accumsan, pretium neque eu, elementum ipsum. Nam dapibus risus sed velit viverra, non consequat nibh pretium. Morbi nec gravida turpis. Quisque convallis justo ut rhoncus
		porttitor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
	</p>
	<h5>This is a header (h5) with column-span: all set on it</h5>
	<p>
		Proin fringilla, sapien molestie mattis commodo, leo ligula viverra massa, eget semper leo purus sit amet est. Quisque eu diam interdum, pretium dui sed, dictum sem. Sed cursus eu est in ultrices. Suspendisse eleifend imperdiet lectus eu consectetur.
		Duis semper libero nec magna commodo, sollicitudin pharetra magna luctus. Fusce pellentesque sollicitudin dolor, eu scelerisque elit condimentum vel. Curabitur id condimentum nisi, eu rhoncus arcu. Proin metus purus, condimentum nec semper vitae, blandit
		at leo. Proin commodo et ipsum ac euismod. Aliquam erat volutpat. Nam neque nisi, ornare sit amet metus ac, faucibus tempor nulla. Quisque tristique malesuada finibus. Praesent fermentum posuere urna, a blandit risus sollicitudin nec.
	</p>

</div>

Ответ 2

Использование 'break-inside: избежать;' каждый абзац

В решении, которое я приложил, я дал каждому DIV класс, позволяющий избежать перерывов, чтобы избежать разрывов в середине абзаца.

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

Вы можете контролировать, когда он сломается, и вы также можете вставить div в div, если хотите, чтобы он был в последовательности.

Надеюсь, что решение будет эффективным для вас.

.columns {
  columns: 5 250px;
}
.columns * {
  max-width: 100%;
}
.break-avoid{
  break-inside: avoid;
  background-color: #ccc;
}