CSS 使用column-count时，除了第一列之外，超出内容完全消失的原因是什么

在本文中，我们将介绍CSS中使用column-count属性时，为什么超出的内容在除了第一列之外的所有列中都会完全消失，并提供一些示例说明。

阅读更多：CSS 教程

column-count属性

column-count是CSS的一个布局属性，用于将内容分割成多列。通过设置column-count，我们可以指定内容应该被分成的列数。该属性可以添加在任何包含多个子元素的容器上，并且适用于大部分浏览器。

以下是column-count属性的语法：

column-count: number|auto|initial|inherit;

number: 指定要创建的列数，可以是正整数或者auto（由浏览器决定列数）。
auto: 自动根据父元素的宽度和子元素的个数来确定列数。
initial: 将属性设置为它的默认值。
inherit: 继承父元素的属性值。

超出内容消失的问题

然而，在使用column-count创建多列布局时，我们可能会遇到一个问题：在除了第一列之外的所有列中，超出的内容完全消失。这是由于默认情况下，列会自动平均宽度分割，而且浏览器会根据列的宽度和数量来确定每个列的内容长度。当内容超过列的宽度时，超出部分会被截断或者溢出。

解决方案

要解决这个问题，我们可以使用column-break-inside属性来改变内容在列中的分布方式。通过将column-break-inside属性应用于包含内容的元素，我们可以控制内容是否允许在列中断行，以及断行后如何分布。

以下是column-break-inside属性的语法：

column-break-inside: auto|avoid|initial|inherit;

auto: 默认值，根据浏览器决定内容是否允许在列中断行。
avoid: 禁止内容在列中断行，强制内容在同一行中展示。
initial: 将属性设置为它的默认值。
inherit: 继承父元素的属性值。

示例

让我们看一个示例，演示如何使用column-break-inside属性来解决超出内容消失的问题。

HTML代码：

<div class="container">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae convallis sem, at volutpat justo. Ut id risus nibh. Nulla facilisi. Pellentesque porttitor metus nec nisl gravida finibus. Quisque convallis nisi id eros luctus, sit amet pretium velit tincidunt. Suspendisse potenti. Phasellus at feugiat felis. Fusce sagittis felis ligula, vel faucibus neque interdum in.</p>
  <p class="content">Suspendisse eget quam est. Curabitur ac nibh in erat interdum semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ut nunc turpis. Nunc scelerisque nulla et nunc rutrum, in eleifend ligula aliquet. Nulla facilisi. Morbi ut hendrerit neque. Proin porttitor maximus lacus, ac maximus purus efficitur a. Integer vehicula fermentum est quis scelerisque. Fusce nec ultrices nunc.</p>
  <p class="content">Aliquam erat volutpat. Nullam a enim vel nulla venenatis varius. Mauris malesuada arcu porttitor sapien auctor, at pharetra sapien vulputate. Ut ante justo, tempor eget dictum vel, gravida vel ex. Vivamus eu nunc ultricies nisi auctor scelerisque vitae ac turpis. Sed dapibus efficitur fringilla.</p>
</div>

CSS代码：

.container {
  column-count: 2;
}

.content {
  column-break-inside: avoid;
}

在这个示例中，我们将一个包含三个段落的容器分成两列，然后将column-break-inside属性应用于内容段落。通过将column-break-inside设置为avoid，我们告诉浏览器不允许内容在列中断行，并强制内容在同一行中展示。这样，即使内容超出了列的宽度，它也不会被截断或者溢出。

总结

当使用column-count属性创建多列布局时，除了第一列之外的所有列中超出的内容会完全消失。这是因为默认情况下，浏览器会根据列的宽度和数量来确定每个列的内容长度。要解决这个问题，我们可以使用column-break-inside属性来控制内容在列中的分布方式。通过将column-break-inside设置为avoid，我们可以强制内容在同一行中展示，从而避免内容的消失。通过仔细调整布局和使用适当的CSS属性，我们可以创建吸引人且易于阅读的多列布局。